﻿<!doctype html>
<html lang="zh-CN">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta name="generator" content="Jekyll v3.6.0">
<title>卡片 &middot; BootstrapVue</title>
<!-- Bootstrap 核心CSS -->
<link href="../../../v4/dist/css/bootstrap.min.css" rel="stylesheet">
<!-- 本文档额外专用css -->
<link href="../../../v4/assets/css/docsearch.min.css" rel="stylesheet">
<link href="../../../v4/assets/css/docs.min.css" rel="stylesheet">
<link href="../../style/bv_path.css" rel="stylesheet">

<!-- Favicons图标定义 -->
<link data-n-head="ssr" rel="manifest" href="../../manifest.json">
<link data-n-head="ssr" rel="shortcut icon" href="../../style/icons/icon_64.png">
<link data-n-head="ssr" rel="apple-touch-icon" href="../../style/icons/icon_512.png" sizes="512x512">

<!-- Meta关键字定义 -->
<meta name="description" content="The most popular HTML, CSS, and JS library in the world.">
<meta name="author" content="Mark Otto, Jacob Thornton, and Bootstrap contributors">

</head>
<body>
<a id="skippy" class="sr-only sr-only-focusable" href="#content">
<div class="container"> <span class="skiplink-text">跳到主体内容</span> </div>
</a>
<header class="navbar navbar-expand navbar-dark flex-column flex-md-row bd-navbar"> <a class="navbar-brand mr-0 mr-md-2" href="../" aria-label="Bootstrap">
  <svg class="d-block" width="36" height="36" viewbox="0 0 612 612" xmlns="http://www.w3.org/2000/svg" focusable="false">
    <title>Bootstrap</title>
    <path fill="currentColor" d="M510 8a94.3 94.3 0 0 1 94 94v408a94.3 94.3 0 0 1-94 94H102a94.3 94.3 0 0 1-94-94V102a94.3 94.3 0 0 1 94-94h408m0-8H102C45.9 0 0 45.9 0 102v408c0 56.1 45.9 102 102 102h408c56.1 0 102-45.9 102-102V102C612 45.9 566.1 0 510 0z"/>
    <path fill="currentColor" d="M196.77 471.5V154.43h124.15c54.27 0 91 31.64 91 79.1 0 33-24.17 63.72-54.71 69.21v1.76c43.07 5.49 70.75 35.82 70.75 78 0 55.81-40 89-107.45 89zm39.55-180.4h63.28c46.8 0 72.29-18.68 72.29-53 0-31.42-21.53-48.78-60-48.78h-75.57zm78.22 145.46c47.68 0 72.73-19.34 72.73-56s-25.93-55.37-76.46-55.37h-74.49v111.4z"/>
  </svg>
  </a>
  <div class="navbar-nav-scroll">
    <ul class="navbar-nav bd-navbar-nav flex-row">
      <li class="nav-item"><a class="nav-link " href="../">首页</a></li>
      <li class="nav-item"><a class="nav-link" href="index.html">中文手册</a></li>
      <li class="nav-item"><a class="nav-link active" href="../components">组件</a></li>
      <li class="nav-item"><a class="nav-link " href="../directives">指令</a></li>
      <li class="nav-item"><a class="nav-link " href="../reference">参考</a></li>
      <li class="nav-item"><a class="nav-link " href="https://bootstrap-vue.org/play" target="_blank">体验</a></li>
      <li class="nav-item"><a class="nav-link " href="http://code.z01.com/v4"><i class="zi zi_bold" zico="粗"></i> Boostrap</a></li>
      <li class="nav-item"><a class="nav-link" href="http://ico.z01.com" target="_blank" rel="noopener">zico图标系统</a></li>
      <li class="nav-item"><a class="nav-link" href="http://www.z01.com" target="_blank" rel="noopener">Zoomla!逐浪CMS</a></li>
    </ul>
  </div>
  <ul class="navbar-nav flex-row ml-md-auto d-none d-md-flex">
    <li class="nav-item dropdown"> <a class="nav-item nav-link dropdown-toggle mr-md-2" href="#" id="bd-versions" data-toggle="dropdown" aria-haspopup="true" aria-expanded="alse"> v2.12.0 </a>
      <div class="dropdown-menu dropdown-menu-right" aria-labelledby="bd-versions"> 
        <a class="dropdown-item active" href="../../../bootstrap-vue/docs/4.0/">Latest (4.3.x)</a>
        <a class="dropdown-item" href="/Boot/">v3.3.7</a>
        <a class="dropdown-item" href="/Sass/">Sass语言</a>
        <a class="dropdown-item" href="/Emmet/">Emmet语法</a>
        <a class="dropdown-item" href="//www.z01.com/tool/" target="_blank">IIS站长工具</a>
        <a class="dropdown-item" href="//ad.z01.com/" target="_blank">广告源码</a>
        <a class="dropdown-item" href="//v.z01.com/mb/" target="_blank">免费模板</a>
        <a class="dropdown-item" href="//v.z01.com/" target="_blank">H5移动创作</a>
        <a class="dropdown-item" href="//www.z01.com/help/web/3234.shtml" target="_blank">Flexbox布局</a>
		<a class="dropdown-item" href="/boot/font.html" target="_blank">Font Awesome</a>
</div>
    </li>
    <li class="nav-item"> <a class="nav-link p-2" href="//zoomla.github.io/bootstrap4-zhcn-documentation" target="_blank" rel="noopener" aria-label="GitHub">
      <svg class="navbar-nav-svg" xmlns="http://www.w3.org/2000/svg" viewbox="0 0 512 499.36" focusable="false">
        <title>GitHub</title>
        <path d="M256 0C114.64 0 0 114.61 0 256c0 113.09 73.34 209 175.08 242.9 12.8 2.35 17.47-5.56 17.47-12.34 0-6.08-.22-22.18-.35-43.54-71.2 15.49-86.2-34.34-86.2-34.34-11.64-29.57-28.42-37.45-28.42-37.45-23.27-15.84 1.73-15.55 1.73-15.55 25.69 1.81 39.21 26.38 39.21 26.38 22.84 39.12 59.92 27.82 74.5 21.27 2.33-16.54 8.94-27.82 16.25-34.22-56.84-6.43-116.6-28.43-116.6-126.49 0-27.95 10-50.8 26.35-68.69-2.63-6.48-11.42-32.5 2.51-67.75 0 0 21.49-6.88 70.4 26.24a242.65 242.65 0 0 1 128.18 0c48.87-33.13 70.33-26.24 70.33-26.24 14 35.25 5.18 61.27 2.55 67.75 16.41 17.9 26.31 40.75 26.31 68.69 0 98.35-59.85 120-116.88 126.32 9.19 7.9 17.38 23.53 17.38 47.41 0 34.22-.31 61.83-.31 70.23 0 6.85 4.61 14.81 17.6 12.31C438.72 464.97 512 369.08 512 256.02 512 114.62 397.37 0 256 0z" fill="currentColor" fill-rule="evenodd"/>
      </svg>
      </a> </li>
    <li class="nav-item"> <a class="nav-link p-2" href="http://www.z01.com/blog/ren/3214.shtml" target="_blank" rel="noopener" aria-label="Slack">译者说</a></li>
  </ul>
  <a class="btn btn-bd-yellow d-none d-lg-inline-block mb-3 mb-md-0 ml-md-3" href="download.html">下载 Bootstrap</a> </header>

<div class="container-fluid">
  <div class="row flex-xl-nowrap">
    <div class="col-12 col-md-3 col-xl-2 bd-sidebar">
      <form class="bd-search d-flex align-items-center">
        <input type="search" class="form-control" id="search-input" placeholder="Search..." aria-label="Search for..." autocomplete="off">
        <button class="btn btn-link bd-search-docs-toggle d-md-none p-0 ml-3" type="button" data-toggle="collapse" data-target="#bd-docs-nav" aria-controls="bd-docs-nav" aria-expanded="false" aria-label="Toggle docs navigation">
        <svg xmlns="http://www.w3.org/2000/svg" viewbox="0 0 30 30" width="30" height="30" focusable="false">
          <title>Menu</title>
          <path stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-miterlimit="10" d="M4 7h22M4 15h22M4 23h22"/>
        </svg>
        </button>
      </form>



<nav class="collapse bd-links" id="bd-docs-nav">
<div class=""><a href="../" class="bd-toc-link">首页</a></div>
<div class="bd-toc-item nuxt-link-exact-active "><a href="../../../bootstrap-vue/docs/" class="bd-toc-link  "> 起步 </a>
<ul class="nav bd-sidenav">
</ul>
</div>
<div class="bd-toc-item active"><a href="../../../bootstrap-vue/docs/components/" class="bd-toc-link nuxt-link-exact-active"> 组件 </a>
<ul class="nav bd-sidenav">
<li class="nav-item"><a href="../../../bootstrap-vue/docs/components/index.html" class="nav-link"> 组件目录 </a></li>
<li class="nav-item"><a href="../../../bootstrap-vue/docs/components/alert.html" class="nav-link"> 警告提示框(Alert) </a></li>
<li class="nav-item"><a href="../../../bootstrap-vue/docs/components/badge.html" class="nav-link"> 徽章(Badge) </a></li>
<li class="nav-item"><a href="../../../bootstrap-vue/docs/components/breadcrumb.html" class="nav-link"> 面包屑导航(Breadcrumb) </a></li>
<li class="nav-item"><a href="../../../bootstrap-vue/docs/components/button.html" class="nav-link"> 按钮(Button) </a></li>
<li class="nav-item"><a href="../../../bootstrap-vue/docs/components/button-group.html" class="nav-link"> 按钮组(Button Group) </a></li>
<li class="nav-item"><a href="../../../bootstrap-vue/docs/components/button-toolbar.html" class="nav-link"> 按钮Toolbar(Button Toolbar) </a></li>
<li class="nav-item"><a href="../../../bootstrap-vue/docs/components/calendar.html" class="nav-link"> 日历组件(Calendar) <small class="badge text-uppercase badge-success">New</small> </a></li>
<li class="nav-item active"><a href="../../../bootstrap-vue/docs/components/card.html" class="nav-link"> 卡片(Card) </a></li>
<li class="nav-item"><a href="../../../bootstrap-vue/docs/components/carousel.html" class="nav-link"> 轮播效果(Carousel) </a></li>
<li class="nav-item"><a href="../../../bootstrap-vue/docs/components/collapse.html" class="nav-link"> 折叠面板(Collapse) </a></li>
<li class="nav-item"><a href="../../../bootstrap-vue/docs/components/dropdown.html" class="nav-link"> 下拉菜单(Dropdown) </a></li>
<li class="nav-item"><a href="../../../bootstrap-vue/docs/components/embed.html" class="nav-link"> 嵌入(Embed) </a></li>
<li class="nav-item"><a href="../../../bootstrap-vue/docs/components/form.html" class="nav-link"> 表单(Form) </a></li>
<li class="nav-item"><a href="../../../bootstrap-vue/docs/components/form-checkbox.html" class="nav-link"> 表单复选框(Form Checkbox) </a></li>
<li class="nav-item"><a href="../../../bootstrap-vue/docs/components/form-datepicker.html" class="nav-link"> 表单时间选择器(Form Datepicker) <small class="badge text-uppercase badge-success">New</small> </a></li>
<li class="nav-item"><a href="../../../bootstrap-vue/docs/components/form-file.html" class="nav-link"> 文件选择(Form File) </a></li>
<li class="nav-item"><a href="../../../bootstrap-vue/docs/components/form-group.html" class="nav-link"> 表单组合(Form Group) </a></li>
<li class="nav-item"><a href="../../../bootstrap-vue/docs/components/form-input.html" class="nav-link"> 表单输入框(Form Input) </a></li>
<li class="nav-item"><a href="../../../bootstrap-vue/docs/components/form-radio.html" class="nav-link"> 单选择表单Form Radio </a></li>
<li class="nav-item"><a href="../../../bootstrap-vue/docs/components/form-select.html" class="nav-link"> 下拉式表单(Form Select) </a></li>
<li class="nav-item"><a href="../../../bootstrap-vue/docs/components/form-spinbutton.html" class="nav-link"> 按钮式表单(Form Spinbuttno) <small class="badge text-uppercase badge-success">New</small> </a></li>
<li class="nav-item"><a href="../../../bootstrap-vue/docs/components/form-tags.html" class="nav-link"> Tags表单选择器(Form Tags) </a></li>
<li class="nav-item"><a href="../../../bootstrap-vue/docs/components/form-textarea.html" class="nav-link"> 文本框(Form Textarea) </a></li>
<li class="nav-item"><a href="../../../bootstrap-vue/docs/components/form-timepicker.html" class="nav-link"> 表单内时间控件(Form Timepicker) </a></li>
<li class="nav-item"><a href="../../../bootstrap-vue/docs/components/image.html" class="nav-link"> 图片(Image) </a></li>

<li class="nav-item"><a href="../../../bootstrap-vue/docs/components/input-group.html" class="nav-link"> 输入框(Input Group) </a></li>
<li class="nav-item"><a href="../../../bootstrap-vue/docs/components/jumbotron.html" class="nav-link"> Hero大块屏(Jumbotron) </a></li>
<li class="nav-item"><a href="../../../bootstrap-vue/docs/components/layout.html" class="nav-link"> 布局与网络Layout and Grid System </a></li>
<li class="nav-item"><a href="../../../bootstrap-vue/docs/components/link.html" class="nav-link"> 链接(Link)</a></li>
<li class="nav-item"><a href="../../../bootstrap-vue/docs/components/list-group.html" class="nav-link"> 列表组(List group) </a></li>
<li class="nav-item"><a href="../../../bootstrap-vue/docs/components/media.html" class="nav-link"> 媒体(Media) </a></li>
<li class="nav-item"><a href="../../../bootstrap-vue/docs/components/modal.html" class="nav-link"> 弹出模态框(Modal) </a></li>
<li class="nav-item"><a href="../../../bootstrap-vue/docs/components/nav.html" class="nav-link"> 导航(Nav) </a></li>
<li class="nav-item"><a href="../../../bootstrap-vue/docs/components/navbar.html" class="nav-link"> 导航栏(Navbar) </a></li>
<li class="nav-item"><a href="../../../bootstrap-vue/docs/components/pagination.html" class="nav-link"> 分页(Pagination) </a></li>
<li class="nav-item"><a href="../../../bootstrap-vue/docs/components/pagination-nav.html" class="nav-link"> 分页导航(Pagination Nav) </a></li>
<li class="nav-item"><a href="../../../bootstrap-vue/docs/components/popover.html" class="nav-link"> 指示备注(Popover) </a></li>
<li class="nav-item"><a href="../../../bootstrap-vue/docs/components/progress.html" class="nav-link"> 进度指示器(Progress) </a></li>
<li class="nav-item"><a href="../../../bootstrap-vue/docs/components/spinner.html" class="nav-link"> 旋转指示器(Spinner) </a></li>
<li class="nav-item"><a href="../../../bootstrap-vue/docs/components/table.html" class="nav-link"> 表格(Table) </a></li>
<li class="nav-item"><a href="../../../bootstrap-vue/docs/components/tabs.html" class="nav-link"> 选项卡(Tabs) </a></li>
<li class="nav-item"><a href="../../../bootstrap-vue/docs/components/time.html" class="nav-link"> 时间组件(Time) </a></li>
<li class="nav-item"><a href="../../../bootstrap-vue/docs/components/toast.html" class="nav-link"> 冒泡推送(Toasts) </a></li>
<li class="nav-item"><a href="../../../bootstrap-vue/docs/components/tooltip.html" class="nav-link"> tip提示组件(Tooltip) </a></li>
</ul>
</div>
<div class="bd-toc-item"><a href="../../../bootstrap-vue/docs/directives/" class="bd-toc-link"> 指令 </a>
<ul class="nav bd-sidenav">
<li class="nav-item"><a href="../../../bootstrap-vue/docs/directives/index.html" class="nav-link"> 指令目录 </a></li>
<li class="nav-item active"><a href="../../../bootstrap-vue/docs/directives/hover.html" class="nav-link"> Hover 指令<small class="badge text-uppercase badge-success">New</small> </a></li>
<li class="nav-item"><a href="../../../bootstrap-vue/docs/directives/popover.html" class="nav-link"> Popover 提示备注</a></li>
<li class="nav-item"><a href="../../../bootstrap-vue/docs/directives/scrollspy.html" class="nav-link"> Scrollspy 滚动监听</a></li>
<li class="nav-item"><a href="../../../bootstrap-vue/docs/directives/tooltip.html" class="nav-link"> Tooltip 提示指令</a></li>
<li class="nav-item"><a href="../../../bootstrap-vue/docs/directives/visible.html" class="nav-link"> Visible 可见性操作<small class="badge text-uppercase badge-success">New</small> </a></li>
</ul>
</div>
<div class="bd-toc-item"><a href="../../../bootstrap-vue/docs/icons.html" class="bd-toc-link"> Icons图标</a>
<ul class="nav bd-sidenav">
</ul>
</div>
  
<div class="bd-toc-item"><a class="bd-toc-link" href="../../../bootstrap-vue/docs/reference">参考</a>
<ul class="nav bd-sidenav">
<li class="nav-item"><a href="../../../bootstrap-vue/docs/reference" class="nav-link.html"> 参考目录 </a></li>
<li class="nav-item"><a href="../../../bootstrap-vue/docs/reference/accessibility.html" class="nav-link">友好访问</a></li>
<li class="nav-item"><a href="../../../bootstrap-vue/docs/reference/color-variants.html" class="nav-link">Color颜色变量 </a></li>
<li class="nav-item"><a href="../../../bootstrap-vue/docs/reference/images.html" class="nav-link"> 组件图像img的src路径解析</a></li>
<li class="nav-item"><a href="../../../bootstrap-vue/docs/reference/router-links.html" class="nav-link"> Router路由支持 </a></li>
<li class="nav-item"><a href="../../../bootstrap-vue/docs/reference/size-props.html" class="nav-link">大小规格</a></li>
<li class="nav-item"><a href="../../../bootstrap-vue/docs/reference/spacing-classes.html" class="nav-link">间距处理</a></li>
<li class="nav-item"><a href="../../../bootstrap-vue/docs/reference/starter-templates.html" class="nav-link">开始模板</a></li>
<li class="nav-item"><a href="../../../bootstrap-vue/docs/reference/theming.html" class="nav-link">主题色彩</a></li>
<li class="nav-item"><a href="../../../bootstrap-vue/docs/reference/utility-classes.html" class="nav-link">通用Class类</a></li>
<li class="nav-item"><a href="../../../bootstrap-vue/docs/reference/validation.html" class="nav-link">Form表单验证</a></li>
</ul>
</div>
<div class=""><a href="https://bootstrap-vue.org/play" class="bd-toc-link" target="_blank">在线模拟器</a></div>
</nav>
</div>

<div class="d-none d-xl-block col-xl-2 bd-toc">
<ul class="section-nav">
<li class="nav-item toc-entry mb-2"><a target="_self" href="#alerts" class="nav-link font-weight-bold"><span>警告提示框Alerts</span></a></li>
<li class="nav-item toc-entry toc-h2 mb-1"><a target="_self" href="#visible-state" class="nav-link"><span>可见状态</span></a>
<ul class="nav flex-column">
<li class="nav-item toc-entry toc-h3"><a target="_self" href="#v-model-support" class="nav-link"><span>v-model支持</span></a></li>
</ul>
</li>
<li class="nav-item toc-entry toc-h2 mb-1"><a target="_self" href="#contextual-variants" class="nav-link"><span>上下文变体</span></a>
<ul class="nav flex-column">
<li class="nav-item toc-entry toc-h3"><a target="_self" href="#conveying-meaning-to-assistive-technologies" class="nav-link"><span>向辅助技术传达意义</span></a></li>
</ul>
</li>
<li class="nav-item toc-entry toc-h2 mb-1"><a target="_self" href="#additional-content-inside-alerts" class="nav-link"><span>警告提示框中的其他内容</span></a>
<ul class="nav flex-column">
<li class="nav-item toc-entry toc-h3"><a target="_self" href="#color-of-links-within-alerts" class="nav-link"><span>警告提示框中链接的颜色</span></a></li>
</ul>
</li>
<li class="nav-item toc-entry toc-h2 mb-1"><a target="_self" href="#dismissible-alerts" class="nav-link"><span>可忽略的警告提示框</span></a>
<ul class="nav flex-column">
<li class="nav-item toc-entry toc-h3"><a target="_self" href="#auto-dismissing-alerts" class="nav-link"><span>自动关闭警告提示框</span></a></li>
</ul>
</li>
<li class="nav-item toc-entry toc-h2 mb-1 active"><a target="_self" href="#fading-alerts" class="nav-link active"><span>褪色警告提示框</span></a> <!----></li>
<li class="nav-item toc-entry toc-h2 mb-1"><a target="_self" href="#component-reference" class="nav-link"><span>组件参考</span></a>
<ul class="nav flex-column">
<li class="nav-item toc-entry toc-h3"><a target="_self" href="#comp-ref-b-alert" class="nav-link"><span>&lt;b-alert&gt;</span></a></li>
<li class="nav-item toc-entry toc-h3"><a target="_self" href="#importing-individual-components" class="nav-link"><span>导入单个组件</span></a></li>
<li class="nav-item toc-entry toc-h3"><a target="_self" href="#importing-as-a-plugin" class="nav-link"><span>导入为Vue.js插件</span></a></li>
</ul>
</li>
</div>


      <main class="col-12 col-md-9 col-xl-8 py-md-3 pl-md-5 bd-content" role="main">

        <nav data-v-aafc4aea="" aria-label="Breadcrumbs" class="float-left mt-2 mb-0 mb-lg-2">
          <ol data-v-aafc4aea="" class="breadcrumb d-inline-flex bg-transparent px-2 py-1 my-0">
            <li data-v-aafc4aea="" class="breadcrumb-item"><a data-v-aafc4aea="" href="../../" class="nuxt-link-active"
                target="_self">首页</a></li>
            <li data-v-aafc4aea="" class="breadcrumb-item"><a data-v-aafc4aea="" href="../../../bootstrap-vue/docs"
                class="nuxt-link-active" target="_self">中文手册</a></li>
            <li data-v-aafc4aea="" class="breadcrumb-item"><a data-v-aafc4aea=""
                href="../../../bootstrap-vue/docs/components/" class="nuxt-link-active" target="_self">组件</a></li>
            <li data-v-aafc4aea="" class="breadcrumb-item active"><span data-v-aafc4aea=""
                aria-current="location">卡片</span></li>
          </ol>
        </nav>
        <div class="clearfix d-block"></div>
        <h1 class="bd-title" id="content">卡片(Cards)</h1>
        <p class="bd-lead">卡片是一种灵活且可扩展的内容容器。 它包括页眉和页脚选项，各种内容，上下文背景颜色以及强大的显示选项。</p>

        <script type="text/javascript" src="../../../v4/assets/js/pupCMS.js"></script>


        <nav class="bd-quick-links mb-3 d-xl-none" data-v-811345e6="">
          <header data-v-811345e6="">
            <button data-v-811345e6="" type="button"
              class="btn font-weight-bold btn-outline-secondary btn-sm btn-block collapsed"
              aria-controls="bd-quick-links-collapse" aria-expanded="false"><span data-v-811345e6="">Show</span> page
              table of contents </button>
          </header>
          <ul data-v-811345e6="" id="bd-quick-links-collapse" class="collapse" style="display: none;">
            <li data-v-811345e6=""><a data-v-811345e6="" target="_self" href="#introduction" class=""><span
                  data-v-811345e6="">Introduction</span></a> </li>
            <li data-v-811345e6=""><a data-v-811345e6="" target="_self" href="#content-types" class=""><span
                  data-v-811345e6="">Content types</span></a>
              <ul data-v-811345e6="">
                <li data-v-811345e6=""><a data-v-811345e6="" target="_self" href="#card-body" class=""><span
                      data-v-811345e6="">Card body</span></a></li>
                <li data-v-811345e6=""><a data-v-811345e6="" target="_self" href="#images" class=""><span
                      data-v-811345e6="">Images</span></a></li>
                <li data-v-811345e6=""><a data-v-811345e6="" target="_self" href="#header-and-footer" class=""><span
                      data-v-811345e6="">Header and footer</span></a></li>
                <li data-v-811345e6=""><a data-v-811345e6="" target="_self" href="#kitchen-sink-example" class=""><span
                      data-v-811345e6="">Kitchen sink example</span></a></li>
              </ul>
            </li>
            <li data-v-811345e6=""><a data-v-811345e6="" target="_self" href="#horizontal-card-layout" class=""><span
                  data-v-811345e6="">Horizontal card layout</span></a> </li>
            <li data-v-811345e6=""><a data-v-811345e6="" target="_self" href="#text-variants" class=""><span
                  data-v-811345e6="">Text variants</span></a> </li>
            <li data-v-811345e6=""><a data-v-811345e6="" target="_self" href="#background-and-border-variants"
                class=""><span data-v-811345e6="">Background and border variants</span></a>
              <ul data-v-811345e6="">
                <li data-v-811345e6=""><a data-v-811345e6="" target="_self" href="#solid" class=""><span
                      data-v-811345e6="">Solid</span></a></li>
                <li data-v-811345e6=""><a data-v-811345e6="" target="_self" href="#bordered" class=""><span
                      data-v-811345e6="">Bordered</span></a></li>
                <li data-v-811345e6=""><a data-v-811345e6="" target="_self" href="#header-and-footer-variants"
                    class=""><span data-v-811345e6="">Header and footer variants</span></a></li>
                <li data-v-811345e6=""><a data-v-811345e6="" target="_self"
                    href="#conveying-meaning-to-assistive-technologies" class=""><span data-v-811345e6="">Conveying
                      meaning to assistive technologies</span></a></li>
              </ul>
            </li>
            <li data-v-811345e6=""><a data-v-811345e6="" target="_self" href="#nav-integration" class=""><span
                  data-v-811345e6="">Nav integration</span></a> </li>
            <li data-v-811345e6=""><a data-v-811345e6="" target="_self" href="#card-groups" class=""><span
                  data-v-811345e6="">Card groups</span></a>
              <ul data-v-811345e6="">
                <li data-v-811345e6=""><a data-v-811345e6="" target="_self" href="#default-card-group" class=""><span
                      data-v-811345e6="">Default card group</span></a></li>
                <li data-v-811345e6=""><a data-v-811345e6="" target="_self" href="#card-deck-groups" class=""><span
                      data-v-811345e6="">Card deck groups</span></a></li>
                <li data-v-811345e6=""><a data-v-811345e6="" target="_self" href="#card-column-groups" class=""><span
                      data-v-811345e6="">Card column groups</span></a></li>
              </ul>
            </li>
            <li data-v-811345e6=""><a data-v-811345e6="" target="_self" href="#component-reference" class=""><span
                  data-v-811345e6="">Component reference</span></a>
              <ul data-v-811345e6="">
                <li data-v-811345e6=""><a data-v-811345e6="" target="_self" href="#comp-ref-b-card" class=""><span
                      data-v-811345e6="">&lt;b-card&gt;</span></a></li>
                <li data-v-811345e6=""><a data-v-811345e6="" target="_self" href="#comp-ref-b-card-header"
                    class=""><span data-v-811345e6="">&lt;b-card-header&gt;</span></a></li>
                <li data-v-811345e6=""><a data-v-811345e6="" target="_self" href="#comp-ref-b-card-footer"
                    class=""><span data-v-811345e6="">&lt;b-card-footer&gt;</span></a></li>
                <li data-v-811345e6=""><a data-v-811345e6="" target="_self" href="#comp-ref-b-card-body" class=""><span
                      data-v-811345e6="">&lt;b-card-body&gt;</span></a></li>
                <li data-v-811345e6=""><a data-v-811345e6="" target="_self" href="#comp-ref-b-card-title" class=""><span
                      data-v-811345e6="">&lt;b-card-title&gt;</span></a></li>
                <li data-v-811345e6=""><a data-v-811345e6="" target="_self" href="#comp-ref-b-card-sub-title"
                    class=""><span data-v-811345e6="">&lt;b-card-sub-title&gt;</span></a></li>
                <li data-v-811345e6=""><a data-v-811345e6="" target="_self" href="#comp-ref-b-card-img" class=""><span
                      data-v-811345e6="">&lt;b-card-img&gt;</span></a></li>
                <li data-v-811345e6=""><a data-v-811345e6="" target="_self" href="#comp-ref-b-card-img-lazy"
                    class=""><span data-v-811345e6="">&lt;b-card-img-lazy&gt;</span></a></li>
                <li data-v-811345e6=""><a data-v-811345e6="" target="_self" href="#comp-ref-b-card-text" class=""><span
                      data-v-811345e6="">&lt;b-card-text&gt;</span></a></li>
                <li data-v-811345e6=""><a data-v-811345e6="" target="_self" href="#comp-ref-b-card-group" class=""><span
                      data-v-811345e6="">&lt;b-card-group&gt;</span></a></li>
                <li data-v-811345e6=""><a data-v-811345e6="" target="_self" href="#importing-individual-components"
                    class=""><span data-v-811345e6="">Importing individual components</span></a></li>
                <li data-v-811345e6=""><a data-v-811345e6="" target="_self" href="#importing-as-a-plugin" class=""><span
                      data-v-811345e6="">Importing as a Vue.js plugin</span></a></li>
              </ul>
            </li>
          </ul>
        </nav>
        <h2 id="introduction" class="bv-no-focus-ring"><span class="bd-content-title">介绍<a class="anchorjs-link"
              href="#introduction" aria-labelledby="introduction"></a></span></h2>
        <p>卡片的标记和样式尽可能少，但是仍然可以提供大量的控制和自定义功能。 内置flexbox，它们易于对准并与其他组件混合良好组件。</p>
        <p><code translate="no" class="notranslate text-nowrap">&lt;b-card&gt;</code> 没有固定的开始宽度，因此它们自然会填充其父元素的整个宽度。
          您可以通过样式或标准的Bootstrap v4尺寸设置类轻松地对其进行自定义。</p>
        <p>通过 <code translate="no" class="notranslate text-nowrap">tag</code> 属性指定，将默认的 <code translate="no"
            class="notranslate text-nowrap">div</code> 根标签更改为任何其他HTML元素。</p>
        <div translate="translate" class="bd-example vue-example vue-example-b-card notranslate">
          <div>
            <article class="card mb-2" style="max-width: 20rem;"><img src="https://picsum.photos/600/300/?image=25"
                alt="Image" class="card-img-top">
              <div class="card-body">
                <h4 class="card-title">Card Title</h4>
                <p class="card-text"> Some quick example text to build on the card title and make up the bulk of the
                  card's content. </p>
                <a role="button" tabindex="0" target="_self" href="#" class="btn btn-primary">Go somewhere</a>
              </div>
            </article>
          </div>
        </div>
        <figure class="highlight">
        <pre class="hljs html text-monospace p-2 notranslate xml editable" translate="no"><span class="hljs-tag">&lt;<span class="hljs-name">div</span>&gt;</span>
  <span class="hljs-tag">&lt;<span class="hljs-name">b-card</span>
    <span class="hljs-attr">title</span>=<span class="hljs-string">"Card Title"</span>
    <span class="hljs-attr">img-src</span>=<span class="hljs-string">"https://picsum.photos/600/300/?image=25"</span>
    <span class="hljs-attr">img-alt</span>=<span class="hljs-string">"Image"</span>
    <span class="hljs-attr">img-top</span>
    <span class="hljs-attr">tag</span>=<span class="hljs-string">"article"</span>
    <span class="hljs-attr">style</span>=<span class="hljs-string">"max-width: 20rem;"</span>
    <span class="hljs-attr">class</span>=<span class="hljs-string">"mb-2"</span>
  &gt;</span>
    <span class="hljs-tag">&lt;<span class="hljs-name">b-card-text</span>&gt;</span>
      Some quick example text to build on the card title and make up the bulk of the card's content.
    <span class="hljs-tag">&lt;/<span class="hljs-name">b-card-text</span>&gt;</span>

    <span class="hljs-tag">&lt;<span class="hljs-name">b-button</span> <span class="hljs-attr">href</span>=<span class="hljs-string">"#"</span> <span class="hljs-attr">variant</span>=<span class="hljs-string">"primary"</span>&gt;</span>Go somewhere<span class="hljs-tag">&lt;/<span class="hljs-name">b-button</span>&gt;</span>
  <span class="hljs-tag">&lt;/<span class="hljs-name">b-card</span>&gt;</span>
<span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span></pre></figure>
        <h2 id="content-types" class="bv-no-focus-ring"><span class="bd-content-title">内容类型<a class="anchorjs-link"
              href="#content-types" aria-labelledby="content-types"></a></span></h2>
        <p>卡片支持各种各样的内容，包括图像、文本、列表组、链接等等。下面是 <code translate="no" class="notranslate text-nowrap">&lt;b-card&gt;</code>
          支持的示例</p>
        <h3 id="card-body" class="bv-no-focus-ring"><span class="bd-content-title">卡片主体<a class="anchorjs-link"
              href="#card-body" aria-labelledby="card-body"></a></span></h3>
        <p><code translate="no" class="notranslate text-nowrap">&lt;b-card&gt;</code> 的构建块是
          <code translate="no" class="notranslate text-nowrap">&lt;b-card-body&gt;</code> 部分，它提供了卡片内的填充部分。</p>
        <p>默认情况下， <code translate="no" class="notranslate text-nowrap">&lt;b-card&gt;</code> 内容自动放置在 <code
            translate="no" class="notranslate text-nowrap">&lt;b-card-body&gt;</code>
          节中：</p>
        <div translate="translate" class="bd-example vue-example vue-example-b-card-body notranslate">
          <div>
            <div class="card text-center">
              <div class="card-body">
                <div class="bg-secondary text-light"> 这是
                  <samp>&lt;b-card-body&gt;</samp> 组件的默认 <samp>&lt;b-card&gt;</samp> >块中的一些内容。 请注意，卡片的边框和此灰色
                  <samp>&lt;div&gt;</samp>之间的填充。 </div>
              </div>
            </div>
          </div>
        </div>
        <figure class="highlight">
        <pre class="hljs html text-monospace p-2 notranslate xml editable" translate="no"><span class="hljs-tag">&lt;<span class="hljs-name">div</span>&gt;</span>
  <span class="hljs-tag">&lt;<span class="hljs-name">b-card</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"text-center"</span>&gt;</span>
    <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"bg-secondary text-light"</span>&gt;</span>
      This is some content within the default <span class="hljs-tag">&lt;<span class="hljs-name">samp</span>&gt;</span><span class="hljs-symbol">&amp;lt;</span>b-card-body<span class="hljs-symbol">&amp;gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">samp</span>&gt;</span> block of the
      <span class="hljs-tag">&lt;<span class="hljs-name">samp</span>&gt;</span><span class="hljs-symbol">&amp;lt;</span>b-card<span class="hljs-symbol">&amp;gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">samp</span>&gt;</span> component. Notice the padding between the card's border and this
      gray <span class="hljs-tag">&lt;<span class="hljs-name">samp</span>&gt;</span><span class="hljs-symbol">&amp;lt;</span>div<span class="hljs-symbol">&amp;gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">samp</span>&gt;</span>.
    <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
  <span class="hljs-tag">&lt;/<span class="hljs-name">b-card</span>&gt;</span>
<span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span></pre></figure>
        <p>通过在 <code translate="no" class="notranslate text-nowrap">&lt;b-card&gt;</code> 上设置 <code translate="no"
            class="notranslate text-nowrap">no-body</code> 属性禁用自动 <code translate="no"
            class="notranslate text-nowrap">&lt;b-card-body&gt;</code> 部分（和相关的填充）。
        </p>
        <div translate="translate" class="bd-example vue-example vue-example-b-card-body-no-body notranslate">
          <div>
            <div class="card text-center">
              <div class="bg-secondary text-light"> 这是一些没有默认
                <samp>&lt;b-card-body&gt;</samp> 部分的内容。 请注意，卡片的边框和此灰色 <samp>&lt;div&gt;</samp>之间没有填充。 </div>
            </div>
          </div>
        </div>
        <figure class="highlight">
        <pre class="hljs html text-monospace p-2 notranslate xml editable" translate="no"><span class="hljs-tag">&lt;<span class="hljs-name">div</span>&gt;</span>
  <span class="hljs-tag">&lt;<span class="hljs-name">b-card</span> <span class="hljs-attr">no-body</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"text-center"</span>&gt;</span>
    <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"bg-secondary text-light"</span>&gt;</span>
      This is some content without the default <span class="hljs-tag">&lt;<span class="hljs-name">samp</span>&gt;</span><span class="hljs-symbol">&amp;lt;</span>b-card-body<span class="hljs-symbol">&amp;gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">samp</span>&gt;</span> section. Notice the
      lack of padding between the card's border and this gray <span class="hljs-tag">&lt;<span class="hljs-name">samp</span>&gt;</span><span class="hljs-symbol">&amp;lt;</span>div<span class="hljs-symbol">&amp;gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">samp</span>&gt;</span>.
    <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
  <span class="hljs-tag">&lt;/<span class="hljs-name">b-card</span>&gt;</span>
<span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span></pre></figure>
        <p>请注意，<code translate="no" class="notranslate text-nowrap">no-body</code> 启用后，<code translate="no"
            class="notranslate text-nowrap">title</code> 和 <code translate="no"
            class="notranslate text-nowrap">sub-title</code> 道具的内容将不会渲染。</p>
        <p>使用 <code translate="no" class="notranslate text-nowrap">&lt;b-card-body&gt;</code> 子组件将您自己的卡片主体放置在 <code
            translate="no" class="notranslate text-nowrap">no-body</code> 的 <code translate="no"
            class="notranslate text-nowrap">&lt;b-card&gt;</code> 组件中。</p>
        <h4 id="titles-text-and-links" class="bv-no-focus-ring"><span class="bd-content-title">标题，文字和链接<a
              class="anchorjs-link" href="#titles-text-and-links" aria-labelledby="titles-text-and-links"></a></span>
        </h4>
        <p><em>卡片标题</em> 是通过 <code translate="no" class="notranslate text-nowrap">title</code> 属性添加的，<em>子标题</em> 是通过
          <code translate="no" class="notranslate text-nowrap">sub-title</code> 属性添加的。标题使用子组件渲染，<code translate="no"
            class="notranslate text-nowrap">&lt;b-card-title&gt;</code> 而子标题使用子组件渲染 <code translate="no"
            class="notranslate text-nowrap">&lt;b-card-sub-title&gt;</code> 。</p>
        <p>通过子组件 <code translate="no" class="notranslate text-nowrap">&lt;b-card-text&gt;</code>，可以将段落文本添加到卡片中。最后一个
          <code translate="no" class="notranslate text-nowrap">&lt;b-card-text&gt;</code> 将会被自动删除(通过CSS)。<code
            translate="no" class="notranslate text-nowrap">&lt;b-card-text&gt;</code> 中的文本也可以使用标准的HTML标记样式化。</p>
        <p>通过将 <code translate="no" class="notranslate text-nowrap">.card-link</code> 类添加到 <code translate="no"
            class="notranslate text-nowrap">&lt;a&gt;</code> 标签（或 <code translate="no"
            class="notranslate text-nowrap">&lt;b-link&gt;</code>组件）中，可以添加链接并将它们放在一起。</p>
        <div translate="translate" class="bd-example vue-example vue-example-b-card-text notranslate">
          <div>
            <div class="card">
              <div class="card-body">
                <h4 class="card-title">Card title</h4>
                <h6 class="card-subtitle text-muted mb-2">Card subtitle</h6>
                <p class="card-text"> Some quick example text to build on the <em>card title</em> and make up the bulk
                  of the card's
                  content. </p>
                <p class="card-text">A second paragraph of text in the card.</p>
                <a href="#" class="card-link">Card link</a> <a target="_self" href="#" class="card-link">Another
                  link</a>
              </div>
            </div>
          </div>
        </div>
        <figure class="highlight">
        <pre class="hljs html text-monospace p-2 notranslate xml editable" translate="no"><span class="hljs-tag">&lt;<span class="hljs-name">div</span>&gt;</span>
  <span class="hljs-tag">&lt;<span class="hljs-name">b-card</span> <span class="hljs-attr">title</span>=<span class="hljs-string">"Card title"</span> <span class="hljs-attr">sub-title</span>=<span class="hljs-string">"Card subtitle"</span>&gt;</span>
    <span class="hljs-tag">&lt;<span class="hljs-name">b-card-text</span>&gt;</span>
      Some quick example text to build on the <span class="hljs-tag">&lt;<span class="hljs-name">em</span>&gt;</span>card title<span class="hljs-tag">&lt;/<span class="hljs-name">em</span>&gt;</span> and make up the bulk of the card's
      content.
    <span class="hljs-tag">&lt;/<span class="hljs-name">b-card-text</span>&gt;</span>

    <span class="hljs-tag">&lt;<span class="hljs-name">b-card-text</span>&gt;</span>A second paragraph of text in the card.<span class="hljs-tag">&lt;/<span class="hljs-name">b-card-text</span>&gt;</span>

    <span class="hljs-tag">&lt;<span class="hljs-name">a</span> <span class="hljs-attr">href</span>=<span class="hljs-string">"#"</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"card-link"</span>&gt;</span>Card link<span class="hljs-tag">&lt;/<span class="hljs-name">a</span>&gt;</span>
    <span class="hljs-tag">&lt;<span class="hljs-name">b-link</span> <span class="hljs-attr">href</span>=<span class="hljs-string">"#"</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"card-link"</span>&gt;</span>Another link<span class="hljs-tag">&lt;/<span class="hljs-name">b-link</span>&gt;</span>
  <span class="hljs-tag">&lt;/<span class="hljs-name">b-card</span>&gt;</span>
<span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span></pre></figure>
        <h3 id="images" class="bv-no-focus-ring"><span class="bd-content-title">图片<a class="anchorjs-link"
              href="#images" aria-labelledby="images"></a></span></h3>
        <p>该 <code translate="no" class="notranslate text-nowrap">&lt;b-card&gt;</code> 属性 <code translate="no"
            class="notranslate text-nowrap">img-src</code> 将图像放置在卡的顶部，并使用 <code translate="no"
            class="notranslate text-nowrap">img-alt</code> 属性指定要在图像 <code translate="no"
            class="notranslate text-nowrap">alt</code> 属性中放置的字符串。由 <code translate="no"
            class="notranslate text-nowrap">img-src</code> 道具指定的图像将响应并在更改卡的宽度时调整其宽度。</p>
        <p>或者，您可以 <code translate="no" class="notranslate text-nowrap">&lt;b-card&gt;</code> 使用子组件手动将图像放置在内部 <code
            translate="no" class="notranslate text-nowrap">&lt;b-card-img&gt;</code> 。有关用法，请参见下面的厨房水槽示例。</p>
        <div translate="translate" class="bd-example vue-example vue-example-b-card-img notranslate">
          <div>
            <div>
              <h4>Top and Bottom</h4>
              <div class="card-deck">
                <div class="card"><img src="https://placekitten.com/1000/300" alt="Card image" class="card-img-top">
                  <div class="card-body">
                    <p class="card-text"> Some quick example text to build on the card and make up the bulk of the
                      card's content. </p>
                  </div>
                </div>
                <div class="card">
                  <div class="card-body">
                    <p class="card-text"> Some quick example text to build on the card and make up the bulk of the
                      card's content. </p>
                  </div>
                  <img src="https://placekitten.com/1000/300" alt="Card image" class="card-img-bottom">
                </div>
              </div>
            </div>
            <div class="mt-4">
              <h4>Left and Right (or Start and End)</h4>
              <div class="card mb-3 flex-row"><img src="https://placekitten.com/300/300" alt="Card image"
                  class="card-img-left">
                <div class="card-body">
                  <p class="card-text"> Some quick example text to build on the card and make up the bulk of the card's
                    content. </p>
                </div>
              </div>
              <div class="card flex-row-reverse"><img src="https://placekitten.com/300/300" alt="Card image"
                  class="card-img-right">
                <div class="card-body">
                  <p class="card-text"> Some quick example text to build on the card and make up the bulk of the card's
                    content. </p>
                </div>
              </div>
            </div>
          </div>
        </div>
        <figure class="highlight">
        <pre class="hljs html text-monospace p-2 notranslate xml editable" translate="no"><span class="hljs-tag">&lt;<span class="hljs-name">div</span>&gt;</span>
  <span class="hljs-tag">&lt;<span class="hljs-name">div</span>&gt;</span>
    <span class="hljs-tag">&lt;<span class="hljs-name">h4</span>&gt;</span>Top and Bottom<span class="hljs-tag">&lt;/<span class="hljs-name">h4</span>&gt;</span>
    <span class="hljs-tag">&lt;<span class="hljs-name">b-card-group</span> <span class="hljs-attr">deck</span>&gt;</span>
      <span class="hljs-tag">&lt;<span class="hljs-name">b-card</span> <span class="hljs-attr">img-src</span>=<span class="hljs-string">"https://placekitten.com/1000/300"</span> <span class="hljs-attr">img-alt</span>=<span class="hljs-string">"Card image"</span> <span class="hljs-attr">img-top</span>&gt;</span>
        <span class="hljs-tag">&lt;<span class="hljs-name">b-card-text</span>&gt;</span>
          Some quick example text to build on the card and make up the bulk of the card's content.
        <span class="hljs-tag">&lt;/<span class="hljs-name">b-card-text</span>&gt;</span>
      <span class="hljs-tag">&lt;/<span class="hljs-name">b-card</span>&gt;</span>

      <span class="hljs-tag">&lt;<span class="hljs-name">b-card</span> <span class="hljs-attr">img-src</span>=<span class="hljs-string">"https://placekitten.com/1000/300"</span> <span class="hljs-attr">img-alt</span>=<span class="hljs-string">"Card image"</span> <span class="hljs-attr">img-bottom</span>&gt;</span>
        <span class="hljs-tag">&lt;<span class="hljs-name">b-card-text</span>&gt;</span>
          Some quick example text to build on the card and make up the bulk of the card's content.
        <span class="hljs-tag">&lt;/<span class="hljs-name">b-card-text</span>&gt;</span>
      <span class="hljs-tag">&lt;/<span class="hljs-name">b-card</span>&gt;</span>
    <span class="hljs-tag">&lt;/<span class="hljs-name">b-card-group</span>&gt;</span>
  <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
  <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"mt-4"</span>&gt;</span>
    <span class="hljs-tag">&lt;<span class="hljs-name">h4</span>&gt;</span>Left and Right (or Start and End)<span class="hljs-tag">&lt;/<span class="hljs-name">h4</span>&gt;</span>
    <span class="hljs-tag">&lt;<span class="hljs-name">b-card</span> <span class="hljs-attr">img-src</span>=<span class="hljs-string">"https://placekitten.com/300/300"</span> <span class="hljs-attr">img-alt</span>=<span class="hljs-string">"Card image"</span> <span class="hljs-attr">img-left</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"mb-3"</span>&gt;</span>
      <span class="hljs-tag">&lt;<span class="hljs-name">b-card-text</span>&gt;</span>
        Some quick example text to build on the card and make up the bulk of the card's content.
      <span class="hljs-tag">&lt;/<span class="hljs-name">b-card-text</span>&gt;</span>
    <span class="hljs-tag">&lt;/<span class="hljs-name">b-card</span>&gt;</span>

    <span class="hljs-tag">&lt;<span class="hljs-name">b-card</span> <span class="hljs-attr">img-src</span>=<span class="hljs-string">"https://placekitten.com/300/300"</span> <span class="hljs-attr">img-alt</span>=<span class="hljs-string">"Card image"</span> <span class="hljs-attr">img-right</span>&gt;</span>
      <span class="hljs-tag">&lt;<span class="hljs-name">b-card-text</span>&gt;</span>
        Some quick example text to build on the card and make up the bulk of the card's content.
      <span class="hljs-tag">&lt;/<span class="hljs-name">b-card-text</span>&gt;</span>
    <span class="hljs-tag">&lt;/<span class="hljs-name">b-card</span>&gt;</span>
  <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
<span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span></pre></figure>
        <p><strong>注意：</strong> 对于左边和右边的图像，您可能需要对 <code translate="no"
            class="notranslate text-nowrap">.card-img-left</code> 和 <code translate="no"
            class="notranslate text-nowrap">.card-img-right</code>类应用额外的样式，因为如果您的内容比图像高，图像将在高度上“拉伸”。注意:当图像左对齐或右对齐时，不支持页眉和页脚。您可能会发现，在创建响应式
          <a href="#horizontal-card-layout" class="font-weight-bold">水平卡片布局</a> 时，水平卡片布局示例更加灵活。</p>
        <h4 id="overlay-image" class="bv-no-focus-ring"><span class="bd-content-title">叠加图像<a class="anchorjs-link"
              href="#overlay-image" aria-labelledby="overlay-image"></a></span></h4>
        <p>通过设置布尔属性值（叠加） <code translate="no" class="notranslate text-nowrap">overlay</code>，将图像置于卡片的背景中：</p>
        <div translate="translate" class="bd-example vue-example vue-example-b-card-overlay-img- notranslate">
          <div>
            <div class="card text-white"><img src="https://picsum.photos/900/250/?image=3" alt="Card Image"
                class="card-img">
              <div class="card-body card-img-overlay">
                <h4 class="card-title">Image Overlay</h4>
                <h6 class="card-subtitle text-muted mb-2">Subtitle</h6>
                <p class="card-text"> Some quick example text to build on the card and make up the bulk of the card's
                  content. </p>
              </div>
            </div>
          </div>
        </div>
        <figure class="highlight">
        <pre class="hljs html text-monospace p-2 notranslate xml editable" translate="no"><span class="hljs-tag">&lt;<span class="hljs-name">div</span>&gt;</span>
  <span class="hljs-tag">&lt;<span class="hljs-name">b-card</span>
    <span class="hljs-attr">overlay</span>
    <span class="hljs-attr">img-src</span>=<span class="hljs-string">"https://picsum.photos/900/250/?image=3"</span>
    <span class="hljs-attr">img-alt</span>=<span class="hljs-string">"Card Image"</span>
    <span class="hljs-attr">text-variant</span>=<span class="hljs-string">"white"</span>
    <span class="hljs-attr">title</span>=<span class="hljs-string">"Image Overlay"</span>
    <span class="hljs-attr">sub-title</span>=<span class="hljs-string">"Subtitle"</span>
  &gt;</span>
    <span class="hljs-tag">&lt;<span class="hljs-name">b-card-text</span>&gt;</span>
      Some quick example text to build on the card and make up the bulk of the card's content.
    <span class="hljs-tag">&lt;/<span class="hljs-name">b-card-text</span>&gt;</span>
  <span class="hljs-tag">&lt;/<span class="hljs-name">b-card</span>&gt;</span>
<span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span></pre></figure>
        <h4 id="lazy-loaded-images" class="bv-no-focus-ring"><span class="bd-content-title">懒加载图片<a
              class="anchorjs-link" href="#lazy-loaded-images" aria-labelledby="lazy-loaded-images"></a></span></h4>
        <p>使用 <code translate="no" class="notranslate text-nowrap">&lt;b-card-img-lazy&gt;</code> 子组件在图像滚动到视图中时延迟加载图像。
          <code translate="no" class="notranslate text-nowrap">&lt;b-card-img-lazy&gt;</code> 支持与 <code translate="no"
            class="notranslate text-nowrap">&lt;b-card-img&gt;</code> 相同的属性以及
          <a href="../../../bootstrap-vue/docs/components/image#lazy-loaded-images" class="font-weight-bold"><code
              translate="no" class="notranslate text-nowrap">&lt;b-img-lazy&gt;</code></a> 组件的许多属性。</p>
        <h3 id="header-and-footer" class="bv-no-focus-ring"><span class="bd-content-title">页眉和页脚<a class="anchorjs-link"
              href="#header-and-footer" aria-labelledby="header-and-footer"></a></span></h3>
        <p>通过页眉/页脚属性或命名的插槽在卡中添加可选的 <code translate="no" class="notranslate text-nowrap">header</code>/<code
            translate="no" class="notranslate text-nowrap">footer</code> 。
          您可以通过设置 <code translate="no" class="notranslate text-nowrap">header-tag</code> 和 <code translate="no"
            class="notranslate text-nowrap">footer-tag</code> 属性来控制使用的包装器元素标签（ 默认均为 <code translate="no"
            class="notranslate text-nowrap">div</code> ）</p>
        <div translate="translate" class="bd-example vue-example vue-example-b-card-header-footer notranslate">
          <div>
            <div class="card-deck">
              <div class="card">
                <header class="card-header">
                  <div>featured</div>
                </header>
                <div class="card-body">
                  <h4 class="card-title">Title</h4>
                  <p class="card-text">Header and footers using props.</p>
                  <a role="button" tabindex="0" target="_self" href="#" class="btn btn-primary">Go somewhere</a>
                </div>
                <footer class="card-footer">
                  <div>Card Footer</div>
                </footer>
              </div>
              <div class="card">
                <header class="card-header">
                  <h6 class="mb-0">Header Slot</h6>
                </header>
                <div class="card-body">
                  <h4 class="card-title">Title</h4>
                  <p class="card-text">Header and footers using slots.</p>
                  <a role="button" tabindex="0" target="_self" href="#" class="btn btn-primary">Go somewhere</a>
                </div>
                <footer class="card-footer"><em>Footer Slot</em></footer>
              </div>
            </div>
          </div>
        </div>
        <figure class="highlight">
        <pre class="hljs html text-monospace p-2 notranslate xml editable" translate="no"><span class="hljs-tag">&lt;<span class="hljs-name">div</span>&gt;</span>
  <span class="hljs-tag">&lt;<span class="hljs-name">b-card-group</span> <span class="hljs-attr">deck</span>&gt;</span>
    <span class="hljs-tag">&lt;<span class="hljs-name">b-card</span>
      <span class="hljs-attr">header</span>=<span class="hljs-string">"featured"</span>
      <span class="hljs-attr">header-tag</span>=<span class="hljs-string">"header"</span>
      <span class="hljs-attr">footer</span>=<span class="hljs-string">"Card Footer"</span>
      <span class="hljs-attr">footer-tag</span>=<span class="hljs-string">"footer"</span>
      <span class="hljs-attr">title</span>=<span class="hljs-string">"Title"</span>
    &gt;</span>
      <span class="hljs-tag">&lt;<span class="hljs-name">b-card-text</span>&gt;</span>Header and footers using props.<span class="hljs-tag">&lt;/<span class="hljs-name">b-card-text</span>&gt;</span>
      <span class="hljs-tag">&lt;<span class="hljs-name">b-button</span> <span class="hljs-attr">href</span>=<span class="hljs-string">"#"</span> <span class="hljs-attr">variant</span>=<span class="hljs-string">"primary"</span>&gt;</span>Go somewhere<span class="hljs-tag">&lt;/<span class="hljs-name">b-button</span>&gt;</span>
    <span class="hljs-tag">&lt;/<span class="hljs-name">b-card</span>&gt;</span>

    <span class="hljs-tag">&lt;<span class="hljs-name">b-card</span> <span class="hljs-attr">title</span>=<span class="hljs-string">"Title"</span> <span class="hljs-attr">header-tag</span>=<span class="hljs-string">"header"</span> <span class="hljs-attr">footer-tag</span>=<span class="hljs-string">"footer"</span>&gt;</span>
      <span class="hljs-tag">&lt;<span class="hljs-name">template</span> <span class="hljs-attr">v-slot:header</span>&gt;</span>
        <span class="hljs-tag">&lt;<span class="hljs-name">h6</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"mb-0"</span>&gt;</span>Header Slot<span class="hljs-tag">&lt;/<span class="hljs-name">h6</span>&gt;</span>
      <span class="hljs-tag">&lt;/<span class="hljs-name">template</span>&gt;</span>
      <span class="hljs-tag">&lt;<span class="hljs-name">b-card-text</span>&gt;</span>Header and footers using slots.<span class="hljs-tag">&lt;/<span class="hljs-name">b-card-text</span>&gt;</span>
      <span class="hljs-tag">&lt;<span class="hljs-name">b-button</span> <span class="hljs-attr">href</span>=<span class="hljs-string">"#"</span> <span class="hljs-attr">variant</span>=<span class="hljs-string">"primary"</span>&gt;</span>Go somewhere<span class="hljs-tag">&lt;/<span class="hljs-name">b-button</span>&gt;</span>
      <span class="hljs-tag">&lt;<span class="hljs-name">template</span> <span class="hljs-attr">v-slot:footer</span>&gt;</span>
        <span class="hljs-tag">&lt;<span class="hljs-name">em</span>&gt;</span>Footer Slot<span class="hljs-tag">&lt;/<span class="hljs-name">em</span>&gt;</span>
      <span class="hljs-tag">&lt;/<span class="hljs-name">template</span>&gt;</span>
    <span class="hljs-tag">&lt;/<span class="hljs-name">b-card</span>&gt;</span>
  <span class="hljs-tag">&lt;/<span class="hljs-name">b-card-group</span>&gt;</span>
<span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span></pre></figure>
        <h3 id="kitchen-sink-example" class="bv-no-focus-ring"><span class="bd-content-title">厨房水槽示例<a
              class="anchorjs-link" href="#kitchen-sink-example" aria-labelledby="kitchen-sink-example"></a></span></h3>
        <p>混合和匹配多种内容类型来创建您需要的卡片，或者将所有内容都放入其中。下面显示的是图像样式、块、文本样式和列表组—所有这些都包装在固定宽度的卡片中。</p>
        <div translate="translate" class="bd-example vue-example vue-example-b-card-kitchen-sink notranslate">
          <div>
            <div class="card" style="max-width: 20rem;"><img src="https://placekitten.com/380/200" alt="Image"
                class="card-img-top">
              <div class="card-header">
                <h4 class="mb-0">Hello World</h4>
              </div>
              <div class="card-body">
                <h4 class="card-title">Card Title</h4>
                <h6 class="card-subtitle mb-2 text-muted">Card Sub Title</h6>
                <p class="card-text"> Some quick example text to build on the card title and make up the bulk of the
                  card's
                  content. </p>
              </div>
              <div class="list-group list-group-flush">
                <div class="list-group-item">Cras justo odio</div>
                <div class="list-group-item">Dapibus ac facilisis in</div>
                <div class="list-group-item">Vestibulum at eros</div>
              </div>
              <div class="card-body"><a href="#" class="card-link">Card link</a> <a href="#" class="card-link">Another
                  link</a></div>
              <div class="card-footer">This is a footer</div>
              <img src="https://placekitten.com/480/210" alt="Image" class="card-img-bottom">
            </div>
          </div>
        </div>
        <figure class="highlight">
        <pre class="hljs html text-monospace p-2 notranslate xml editable" translate="no"><span class="hljs-tag">&lt;<span class="hljs-name">div</span>&gt;</span>
  <span class="hljs-tag">&lt;<span class="hljs-name">b-card</span>
    <span class="hljs-attr">no-body</span>
    <span class="hljs-attr">style</span>=<span class="hljs-string">"max-width: 20rem;"</span>
    <span class="hljs-attr">img-src</span>=<span class="hljs-string">"https://placekitten.com/380/200"</span>
    <span class="hljs-attr">img-alt</span>=<span class="hljs-string">"Image"</span>
    <span class="hljs-attr">img-top</span>
  &gt;</span>
    <span class="hljs-tag">&lt;<span class="hljs-name">template</span> <span class="hljs-attr">v-slot:header</span>&gt;</span>
      <span class="hljs-tag">&lt;<span class="hljs-name">h4</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"mb-0"</span>&gt;</span>Hello World<span class="hljs-tag">&lt;/<span class="hljs-name">h4</span>&gt;</span>
    <span class="hljs-tag">&lt;/<span class="hljs-name">template</span>&gt;</span>

    <span class="hljs-tag">&lt;<span class="hljs-name">b-card-body</span>&gt;</span>
      <span class="hljs-tag">&lt;<span class="hljs-name">b-card-title</span>&gt;</span>Card Title<span class="hljs-tag">&lt;/<span class="hljs-name">b-card-title</span>&gt;</span>
      <span class="hljs-tag">&lt;<span class="hljs-name">b-card-sub-title</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"mb-2"</span>&gt;</span>Card Sub Title<span class="hljs-tag">&lt;/<span class="hljs-name">b-card-sub-title</span>&gt;</span>
      <span class="hljs-tag">&lt;<span class="hljs-name">b-card-text</span>&gt;</span>
        Some quick example text to build on the card title and make up the bulk of the card's
        content.
      <span class="hljs-tag">&lt;/<span class="hljs-name">b-card-text</span>&gt;</span>
    <span class="hljs-tag">&lt;/<span class="hljs-name">b-card-body</span>&gt;</span>

    <span class="hljs-tag">&lt;<span class="hljs-name">b-list-group</span> <span class="hljs-attr">flush</span>&gt;</span>
      <span class="hljs-tag">&lt;<span class="hljs-name">b-list-group-item</span>&gt;</span>Cras justo odio<span class="hljs-tag">&lt;/<span class="hljs-name">b-list-group-item</span>&gt;</span>

      <span class="hljs-tag">&lt;<span class="hljs-name">b-list-group-item</span>&gt;</span>Dapibus ac facilisis in<span class="hljs-tag">&lt;/<span class="hljs-name">b-list-group-item</span>&gt;</span>
      <span class="hljs-tag">&lt;<span class="hljs-name">b-list-group-item</span>&gt;</span>Vestibulum at eros<span class="hljs-tag">&lt;/<span class="hljs-name">b-list-group-item</span>&gt;</span>
    <span class="hljs-tag">&lt;/<span class="hljs-name">b-list-group</span>&gt;</span>

    <span class="hljs-tag">&lt;<span class="hljs-name">b-card-body</span>&gt;</span>
      <span class="hljs-tag">&lt;<span class="hljs-name">a</span> <span class="hljs-attr">href</span>=<span class="hljs-string">"#"</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"card-link"</span>&gt;</span>Card link<span class="hljs-tag">&lt;/<span class="hljs-name">a</span>&gt;</span>
      <span class="hljs-tag">&lt;<span class="hljs-name">a</span> <span class="hljs-attr">href</span>=<span class="hljs-string">"#"</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"card-link"</span>&gt;</span>Another link<span class="hljs-tag">&lt;/<span class="hljs-name">a</span>&gt;</span>
    <span class="hljs-tag">&lt;/<span class="hljs-name">b-card-body</span>&gt;</span>

    <span class="hljs-tag">&lt;<span class="hljs-name">b-card-footer</span>&gt;</span>This is a footer<span class="hljs-tag">&lt;/<span class="hljs-name">b-card-footer</span>&gt;</span>

    <span class="hljs-tag">&lt;<span class="hljs-name">b-card-img</span> <span class="hljs-attr">src</span>=<span class="hljs-string">"https://placekitten.com/480/210"</span> <span class="hljs-attr">alt</span>=<span class="hljs-string">"Image"</span> <span class="hljs-attr">bottom</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">b-card-img</span>&gt;</span>
  <span class="hljs-tag">&lt;/<span class="hljs-name">b-card</span>&gt;</span>
<span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span></pre></figure>
        <h2 id="horizontal-card-layout" class="bv-no-focus-ring"><span class="bd-content-title">水平卡片布局<a
              class="anchorjs-link" href="#horizontal-card-layout" aria-labelledby="horizontal-card-layout"></a></span>
        </h2>
        <p>使用网格（grid）组件、实用程序类和单个卡片子组件的组合，可以使卡片以便于移动和响应的方式水平放置。</p>
        <p>在下面的示例中，我们使用 <code translate="no" class="notranslate text-nowrap">&lt;b-row&gt;</code> 上的 <code
            translate="no" class="notranslate text-nowrap">no-gutters</code> 属性删除行网格装订线，并使用 <code translate="no"
            class="notranslate text-nowrap">&lt;b-col&gt;</code> 上的 <code translate="no"
            class="notranslate text-nowrap">md</code> 属性将卡片水平放置在 <code translate="no"
            class="notranslate text-nowrap">md</code> 断点处。<code translate="no"
            class="notranslate text-nowrap">rounded-0</code> 类将除去 <code translate="no"
            class="notranslate text-nowrap">&lt;b-card-img&gt;</code> 的圆角，而 <code translate="no"
            class="notranslate text-nowrap">&lt;b-card&gt;</code> 上的 <code translate="no"
            class="notranslate text-nowrap">overflow-hidden</code> 将根据卡片的 border-radius 适当地裁剪图像的角。根据您的卡片内容，可能需要进一步调整。
        </p>
        <div translate="translate" class="bd-example vue-example vue-example-b-card-horizontal notranslate">
          <div>
            <div class="card overflow-hidden" style="max-width: 540px;">
              <div class="row no-gutters">
                <div class="col-md-6"><img src="https://picsum.photos/400/400/?image=20" class="rounded-0 card-img">
                </div>
                <div class="col-md-6">
                  <div class="card-body">
                    <h4 class="card-title">Horizontal Card</h4>
                    <p class="card-text"> This is a wider card with supporting text as a natural lead-in to additional
                      content.
                      This content is a little bit longer. </p>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
        <figure class="highlight">
        <pre class="hljs html text-monospace p-2 notranslate xml editable" translate="no"><span class="hljs-tag">&lt;<span class="hljs-name">div</span>&gt;</span>
  <span class="hljs-tag">&lt;<span class="hljs-name">b-card</span> <span class="hljs-attr">no-body</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"overflow-hidden"</span> <span class="hljs-attr">style</span>=<span class="hljs-string">"max-width: 540px;"</span>&gt;</span>
    <span class="hljs-tag">&lt;<span class="hljs-name">b-row</span> <span class="hljs-attr">no-gutters</span>&gt;</span>
      <span class="hljs-tag">&lt;<span class="hljs-name">b-col</span> <span class="hljs-attr">md</span>=<span class="hljs-string">"6"</span>&gt;</span>
        <span class="hljs-tag">&lt;<span class="hljs-name">b-card-img</span> <span class="hljs-attr">src</span>=<span class="hljs-string">"https://picsum.photos/400/400/?image=20"</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"rounded-0"</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">b-card-img</span>&gt;</span>
      <span class="hljs-tag">&lt;/<span class="hljs-name">b-col</span>&gt;</span>
      <span class="hljs-tag">&lt;<span class="hljs-name">b-col</span> <span class="hljs-attr">md</span>=<span class="hljs-string">"6"</span>&gt;</span>
        <span class="hljs-tag">&lt;<span class="hljs-name">b-card-body</span> <span class="hljs-attr">title</span>=<span class="hljs-string">"Horizontal Card"</span>&gt;</span>
          <span class="hljs-tag">&lt;<span class="hljs-name">b-card-text</span>&gt;</span>
            This is a wider card with supporting text as a natural lead-in to additional content.
            This content is a little bit longer.
          <span class="hljs-tag">&lt;/<span class="hljs-name">b-card-text</span>&gt;</span>
        <span class="hljs-tag">&lt;/<span class="hljs-name">b-card-body</span>&gt;</span>
      <span class="hljs-tag">&lt;/<span class="hljs-name">b-col</span>&gt;</span>
    <span class="hljs-tag">&lt;/<span class="hljs-name">b-row</span>&gt;</span>
  <span class="hljs-tag">&lt;/<span class="hljs-name">b-card</span>&gt;</span>
<span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span></pre></figure>
        <h2 id="text-variants" class="bv-no-focus-ring"><span class="bd-content-title">文本变量<a class="anchorjs-link"
              href="#text-variants" aria-labelledby="text-variants"></a></span></h2>
        <p>默认情况下，卡片使用深色文字并采用浅色背景。 您可以通过 <code translate="no"
            class="notranslate text-nowrap">text-variant</code>属性切换文本以及卡的子组件的颜色来反转颜色。 然后，指定深色背景变体。</p>
        <div translate="translate" class="bd-example vue-example vue-example-b-card-text-variants notranslate">
          <div class="card bg-dark text-white">
            <div class="card-body">
              <h4 class="card-title">Card Title</h4>
              <p class="card-text"> With supporting text below as a natural lead-in to additional content. </p>
              <a role="button" tabindex="0" target="_self" href="#" class="btn btn-primary">Go somewhere</a>
            </div>
          </div>
        </div>
        <figure class="highlight">
        <pre class="hljs html text-monospace p-2 notranslate xml editable" translate="no"><span class="hljs-tag">&lt;<span class="hljs-name">b-card</span> <span class="hljs-attr">bg-variant</span>=<span class="hljs-string">"dark"</span> <span class="hljs-attr">text-variant</span>=<span class="hljs-string">"white"</span> <span class="hljs-attr">title</span>=<span class="hljs-string">"Card Title"</span>&gt;</span>
  <span class="hljs-tag">&lt;<span class="hljs-name">b-card-text</span>&gt;</span>
    With supporting text below as a natural lead-in to additional content.
  <span class="hljs-tag">&lt;/<span class="hljs-name">b-card-text</span>&gt;</span>
  <span class="hljs-tag">&lt;<span class="hljs-name">b-button</span> <span class="hljs-attr">href</span>=<span class="hljs-string">"#"</span> <span class="hljs-attr">variant</span>=<span class="hljs-string">"primary"</span>&gt;</span>Go somewhere<span class="hljs-tag">&lt;/<span class="hljs-name">b-button</span>&gt;</span>
<span class="hljs-tag">&lt;/<span class="hljs-name">b-card</span>&gt;</span></pre></figure>
        <h2 id="background-and-border-variants" class="bv-no-focus-ring"><span class="bd-content-title">背景和边框变量<a
              class="anchorjs-link" href="#background-and-border-variants"
              aria-labelledby="background-and-border-variants"></a></span></h2>
        <p>卡片包含自己的变量样式，可通过 <code translate="no" class="notranslate text-nowrap">bg-variant</code> 和 <code translate="no"
            class="notranslate text-nowrap">border-variant</code> 属性快速更改背景颜色以及卡片的颜色。较暗的实体变量我需要设置 <code translate="no"
            class="notranslate text-nowrap">text-variant</code> 属性来调整文本颜色。</p>
        <h3 id="solid" class="bv-no-focus-ring"><span class="bd-content-title">Solid<a class="anchorjs-link"
              href="#solid" aria-labelledby="solid"></a></span></h3>
        <div translate="translate" class="bd-example vue-example vue-example-b-card-variants notranslate">
          <div>
            <div>
              <div class="card-deck">
                <div class="card text-center bg-primary text-white">
                  <div class="card-header">
                    <div>Primary</div>
                  </div>
                  <div class="card-body">
                    <p class="card-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
                  </div>
                </div>
                <div class="card text-center bg-secondary text-white">
                  <div class="card-header">
                    <div>Secondary</div>
                  </div>
                  <div class="card-body">
                    <p class="card-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
                  </div>
                </div>
                <div class="card text-center bg-success text-white">
                  <div class="card-header">
                    <div>Success</div>
                  </div>
                  <div class="card-body">
                    <p class="card-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
                  </div>
                </div>
              </div>
            </div>
            <div class="mt-3">
              <div class="card-deck">
                <div class="card text-center bg-info text-white">
                  <div class="card-header">
                    <div>Info</div>
                  </div>
                  <div class="card-body">
                    <p class="card-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
                  </div>
                </div>
                <div class="card text-center bg-warning text-white">
                  <div class="card-header">
                    <div>Warning</div>
                  </div>
                  <div class="card-body">
                    <p class="card-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
                  </div>
                </div>
                <div class="card text-center bg-danger text-white">
                  <div class="card-header">
                    <div>Danger</div>
                  </div>
                  <div class="card-body">
                    <p class="card-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
                  </div>
                </div>
              </div>
            </div>
            <div class="mt-3">
              <div class="card-deck">
                <div class="card text-center bg-light">
                  <div class="card-header">
                    <div>Light</div>
                  </div>
                  <div class="card-body">
                    <p class="card-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
                  </div>
                </div>
                <div class="card text-center bg-dark text-white">
                  <div class="card-header">
                    <div>Dark</div>
                  </div>
                  <div class="card-body">
                    <p class="card-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
                  </div>
                </div>
                <div class="card text-center">
                  <div class="card-header">
                    <div>Default</div>
                  </div>
                  <div class="card-body">
                    <p class="card-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
        <figure class="highlight">
        <pre class="hljs html text-monospace p-2 notranslate xml editable" translate="no"><span class="hljs-tag">&lt;<span class="hljs-name">div</span>&gt;</span>
  <span class="hljs-tag">&lt;<span class="hljs-name">div</span>&gt;</span>
    <span class="hljs-tag">&lt;<span class="hljs-name">b-card-group</span> <span class="hljs-attr">deck</span>&gt;</span>
      <span class="hljs-tag">&lt;<span class="hljs-name">b-card</span> <span class="hljs-attr">bg-variant</span>=<span class="hljs-string">"primary"</span> <span class="hljs-attr">text-variant</span>=<span class="hljs-string">"white"</span> <span class="hljs-attr">header</span>=<span class="hljs-string">"Primary"</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"text-center"</span>&gt;</span>
        <span class="hljs-tag">&lt;<span class="hljs-name">b-card-text</span>&gt;</span>Lorem ipsum dolor sit amet, consectetur adipiscing elit.<span class="hljs-tag">&lt;/<span class="hljs-name">b-card-text</span>&gt;</span>
      <span class="hljs-tag">&lt;/<span class="hljs-name">b-card</span>&gt;</span>

      <span class="hljs-tag">&lt;<span class="hljs-name">b-card</span> <span class="hljs-attr">bg-variant</span>=<span class="hljs-string">"secondary"</span> <span class="hljs-attr">text-variant</span>=<span class="hljs-string">"white"</span> <span class="hljs-attr">header</span>=<span class="hljs-string">"Secondary"</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"text-center"</span>&gt;</span>
        <span class="hljs-tag">&lt;<span class="hljs-name">b-card-text</span>&gt;</span>Lorem ipsum dolor sit amet, consectetur adipiscing elit.<span class="hljs-tag">&lt;/<span class="hljs-name">b-card-text</span>&gt;</span>
      <span class="hljs-tag">&lt;/<span class="hljs-name">b-card</span>&gt;</span>

      <span class="hljs-tag">&lt;<span class="hljs-name">b-card</span> <span class="hljs-attr">bg-variant</span>=<span class="hljs-string">"success"</span> <span class="hljs-attr">text-variant</span>=<span class="hljs-string">"white"</span> <span class="hljs-attr">header</span>=<span class="hljs-string">"Success"</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"text-center"</span>&gt;</span>
        <span class="hljs-tag">&lt;<span class="hljs-name">b-card-text</span>&gt;</span>Lorem ipsum dolor sit amet, consectetur adipiscing elit.<span class="hljs-tag">&lt;/<span class="hljs-name">b-card-text</span>&gt;</span>
      <span class="hljs-tag">&lt;/<span class="hljs-name">b-card</span>&gt;</span>
    <span class="hljs-tag">&lt;/<span class="hljs-name">b-card-group</span>&gt;</span>
  <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
  <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"mt-3"</span>&gt;</span>
    <span class="hljs-tag">&lt;<span class="hljs-name">b-card-group</span> <span class="hljs-attr">deck</span>&gt;</span>
      <span class="hljs-tag">&lt;<span class="hljs-name">b-card</span> <span class="hljs-attr">bg-variant</span>=<span class="hljs-string">"info"</span> <span class="hljs-attr">text-variant</span>=<span class="hljs-string">"white"</span> <span class="hljs-attr">header</span>=<span class="hljs-string">"Info"</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"text-center"</span>&gt;</span>
        <span class="hljs-tag">&lt;<span class="hljs-name">b-card-text</span>&gt;</span>Lorem ipsum dolor sit amet, consectetur adipiscing elit.<span class="hljs-tag">&lt;/<span class="hljs-name">b-card-text</span>&gt;</span>
      <span class="hljs-tag">&lt;/<span class="hljs-name">b-card</span>&gt;</span>

      <span class="hljs-tag">&lt;<span class="hljs-name">b-card</span> <span class="hljs-attr">bg-variant</span>=<span class="hljs-string">"warning"</span> <span class="hljs-attr">text-variant</span>=<span class="hljs-string">"white"</span> <span class="hljs-attr">header</span>=<span class="hljs-string">"Warning"</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"text-center"</span>&gt;</span>
        <span class="hljs-tag">&lt;<span class="hljs-name">b-card-text</span>&gt;</span>Lorem ipsum dolor sit amet, consectetur adipiscing elit.<span class="hljs-tag">&lt;/<span class="hljs-name">b-card-text</span>&gt;</span>
      <span class="hljs-tag">&lt;/<span class="hljs-name">b-card</span>&gt;</span>

      <span class="hljs-tag">&lt;<span class="hljs-name">b-card</span> <span class="hljs-attr">bg-variant</span>=<span class="hljs-string">"danger"</span> <span class="hljs-attr">text-variant</span>=<span class="hljs-string">"white"</span> <span class="hljs-attr">header</span>=<span class="hljs-string">"Danger"</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"text-center"</span>&gt;</span>
        <span class="hljs-tag">&lt;<span class="hljs-name">b-card-text</span>&gt;</span>Lorem ipsum dolor sit amet, consectetur adipiscing elit.<span class="hljs-tag">&lt;/<span class="hljs-name">b-card-text</span>&gt;</span>
      <span class="hljs-tag">&lt;/<span class="hljs-name">b-card</span>&gt;</span>
    <span class="hljs-tag">&lt;/<span class="hljs-name">b-card-group</span>&gt;</span>
  <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
  <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"mt-3"</span>&gt;</span>
    <span class="hljs-tag">&lt;<span class="hljs-name">b-card-group</span> <span class="hljs-attr">deck</span>&gt;</span>
      <span class="hljs-tag">&lt;<span class="hljs-name">b-card</span> <span class="hljs-attr">bg-variant</span>=<span class="hljs-string">"light"</span> <span class="hljs-attr">header</span>=<span class="hljs-string">"Light"</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"text-center"</span>&gt;</span>
        <span class="hljs-tag">&lt;<span class="hljs-name">b-card-text</span>&gt;</span>Lorem ipsum dolor sit amet, consectetur adipiscing elit.<span class="hljs-tag">&lt;/<span class="hljs-name">b-card-text</span>&gt;</span>
      <span class="hljs-tag">&lt;/<span class="hljs-name">b-card</span>&gt;</span>

      <span class="hljs-tag">&lt;<span class="hljs-name">b-card</span> <span class="hljs-attr">bg-variant</span>=<span class="hljs-string">"dark"</span> <span class="hljs-attr">header</span>=<span class="hljs-string">"Dark"</span> <span class="hljs-attr">text-variant</span>=<span class="hljs-string">"white"</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"text-center"</span>&gt;</span>
        <span class="hljs-tag">&lt;<span class="hljs-name">b-card-text</span>&gt;</span>Lorem ipsum dolor sit amet, consectetur adipiscing elit.<span class="hljs-tag">&lt;/<span class="hljs-name">b-card-text</span>&gt;</span>
      <span class="hljs-tag">&lt;/<span class="hljs-name">b-card</span>&gt;</span>

      <span class="hljs-tag">&lt;<span class="hljs-name">b-card</span> <span class="hljs-attr">header</span>=<span class="hljs-string">"Default"</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"text-center"</span>&gt;</span>
        <span class="hljs-tag">&lt;<span class="hljs-name">b-card-text</span>&gt;</span>Lorem ipsum dolor sit amet, consectetur adipiscing elit.<span class="hljs-tag">&lt;/<span class="hljs-name">b-card-text</span>&gt;</span>
      <span class="hljs-tag">&lt;/<span class="hljs-name">b-card</span>&gt;</span>
    <span class="hljs-tag">&lt;/<span class="hljs-name">b-card-group</span>&gt;</span>
  <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
<span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span></pre></figure>
        <h3 id="bordered" class="bv-no-focus-ring"><span class="bd-content-title">Bordered<a class="anchorjs-link"
              href="#bordered" aria-labelledby="bordered"></a></span></h3>
        <div translate="translate" class="bd-example vue-example vue-example-b-card-border-variants notranslate">
          <div>
            <div>
              <div class="card-deck">
                <div class="card text-center border-primary">
                  <div class="card-header bg-primary text-white">
                    <div>Primary</div>
                  </div>
                  <div class="card-body">
                    <p class="card-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
                  </div>
                </div>
                <div class="card text-center border-secondary">
                  <div class="card-header border-secondary">
                    <div>Secondary</div>
                  </div>
                  <div class="card-body">
                    <p class="card-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
                  </div>
                </div>
                <div class="card text-center border-success">
                  <div class="card-header">
                    <div>Success</div>
                  </div>
                  <div class="card-body">
                    <p class="card-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
                  </div>
                </div>
              </div>
            </div>
            <div class="mt-3">
              <div class="card-deck">
                <div class="card text-center border-info">
                  <div class="card-header">
                    <div>Info</div>
                  </div>
                  <div class="card-body">
                    <p class="card-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
                  </div>
                </div>
                <div class="card text-center border-warning">
                  <div class="card-header bg-transparent">
                    <div>Warning</div>
                  </div>
                  <div class="card-body">
                    <p class="card-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
                  </div>
                </div>
                <div class="card text-center border-danger">
                  <div class="card-header border-danger text-danger">
                    <div>Danger</div>
                  </div>
                  <div class="card-body">
                    <p class="card-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
                  </div>
                </div>
              </div>
            </div>
            <div class="mt-3">
              <div class="mb-3 card-deck">
                <div class="card text-center border-light">
                  <div class="card-header">
                    <div>Light</div>
                  </div>
                  <div class="card-body">
                    <p class="card-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
                  </div>
                </div>
                <div class="card text-center border-dark">
                  <div class="card-header">
                    <div>Dark</div>
                  </div>
                  <div class="card-body">
                    <p class="card-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
        <figure class="highlight">
        <pre class="hljs html text-monospace p-2 notranslate xml editable" translate="no"><span class="hljs-tag">&lt;<span class="hljs-name">div</span>&gt;</span>
  <span class="hljs-tag">&lt;<span class="hljs-name">div</span>&gt;</span>
    <span class="hljs-tag">&lt;<span class="hljs-name">b-card-group</span> <span class="hljs-attr">deck</span>&gt;</span>
      <span class="hljs-tag">&lt;<span class="hljs-name">b-card</span>
        <span class="hljs-attr">border-variant</span>=<span class="hljs-string">"primary"</span>
        <span class="hljs-attr">header</span>=<span class="hljs-string">"Primary"</span>
        <span class="hljs-attr">header-bg-variant</span>=<span class="hljs-string">"primary"</span>
        <span class="hljs-attr">header-text-variant</span>=<span class="hljs-string">"white"</span>
        <span class="hljs-attr">align</span>=<span class="hljs-string">"center"</span>
      &gt;</span>
        <span class="hljs-tag">&lt;<span class="hljs-name">b-card-text</span>&gt;</span>Lorem ipsum dolor sit amet, consectetur adipiscing elit.<span class="hljs-tag">&lt;/<span class="hljs-name">b-card-text</span>&gt;</span>
      <span class="hljs-tag">&lt;/<span class="hljs-name">b-card</span>&gt;</span>

      <span class="hljs-tag">&lt;<span class="hljs-name">b-card</span>
        <span class="hljs-attr">border-variant</span>=<span class="hljs-string">"secondary"</span>
        <span class="hljs-attr">header</span>=<span class="hljs-string">"Secondary"</span>
        <span class="hljs-attr">header-border-variant</span>=<span class="hljs-string">"secondary"</span>
        <span class="hljs-attr">align</span>=<span class="hljs-string">"center"</span>
      &gt;</span>
        <span class="hljs-tag">&lt;<span class="hljs-name">b-card-text</span>&gt;</span>Lorem ipsum dolor sit amet, consectetur adipiscing elit.<span class="hljs-tag">&lt;/<span class="hljs-name">b-card-text</span>&gt;</span>
      <span class="hljs-tag">&lt;/<span class="hljs-name">b-card</span>&gt;</span>

      <span class="hljs-tag">&lt;<span class="hljs-name">b-card</span> <span class="hljs-attr">border-variant</span>=<span class="hljs-string">"success"</span> <span class="hljs-attr">header</span>=<span class="hljs-string">"Success"</span> <span class="hljs-attr">align</span>=<span class="hljs-string">"center"</span>&gt;</span>
        <span class="hljs-tag">&lt;<span class="hljs-name">b-card-text</span>&gt;</span>Lorem ipsum dolor sit amet, consectetur adipiscing elit.<span class="hljs-tag">&lt;/<span class="hljs-name">b-card-text</span>&gt;</span>
      <span class="hljs-tag">&lt;/<span class="hljs-name">b-card</span>&gt;</span>
    <span class="hljs-tag">&lt;/<span class="hljs-name">b-card-group</span>&gt;</span>
  <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
  <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"mt-3"</span>&gt;</span>
    <span class="hljs-tag">&lt;<span class="hljs-name">b-card-group</span> <span class="hljs-attr">deck</span>&gt;</span>
      <span class="hljs-tag">&lt;<span class="hljs-name">b-card</span> <span class="hljs-attr">border-variant</span>=<span class="hljs-string">"info"</span> <span class="hljs-attr">header</span>=<span class="hljs-string">"Info"</span> <span class="hljs-attr">align</span>=<span class="hljs-string">"center"</span>&gt;</span>
        <span class="hljs-tag">&lt;<span class="hljs-name">b-card-text</span>&gt;</span>Lorem ipsum dolor sit amet, consectetur adipiscing elit.<span class="hljs-tag">&lt;/<span class="hljs-name">b-card-text</span>&gt;</span>
      <span class="hljs-tag">&lt;/<span class="hljs-name">b-card</span>&gt;</span>

      <span class="hljs-tag">&lt;<span class="hljs-name">b-card</span>
        <span class="hljs-attr">border-variant</span>=<span class="hljs-string">"warning"</span>
        <span class="hljs-attr">header</span>=<span class="hljs-string">"Warning"</span>
        <span class="hljs-attr">header-bg-variant</span>=<span class="hljs-string">"transparent"</span>
        <span class="hljs-attr">align</span>=<span class="hljs-string">"center"</span>
      &gt;</span>
        <span class="hljs-tag">&lt;<span class="hljs-name">b-card-text</span>&gt;</span>Lorem ipsum dolor sit amet, consectetur adipiscing elit.<span class="hljs-tag">&lt;/<span class="hljs-name">b-card-text</span>&gt;</span>
      <span class="hljs-tag">&lt;/<span class="hljs-name">b-card</span>&gt;</span>

      <span class="hljs-tag">&lt;<span class="hljs-name">b-card</span>
        <span class="hljs-attr">border-variant</span>=<span class="hljs-string">"danger"</span>
        <span class="hljs-attr">header</span>=<span class="hljs-string">"Danger"</span>
        <span class="hljs-attr">header-border-variant</span>=<span class="hljs-string">"danger"</span>
        <span class="hljs-attr">header-text-variant</span>=<span class="hljs-string">"danger"</span>
        <span class="hljs-attr">align</span>=<span class="hljs-string">"center"</span>
      &gt;</span>
        <span class="hljs-tag">&lt;<span class="hljs-name">b-card-text</span>&gt;</span>Lorem ipsum dolor sit amet, consectetur adipiscing elit.<span class="hljs-tag">&lt;/<span class="hljs-name">b-card-text</span>&gt;</span>
      <span class="hljs-tag">&lt;/<span class="hljs-name">b-card</span>&gt;</span>
    <span class="hljs-tag">&lt;/<span class="hljs-name">b-card-group</span>&gt;</span>
  <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
  <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"mt-3"</span>&gt;</span>
    <span class="hljs-tag">&lt;<span class="hljs-name">b-card-group</span> <span class="hljs-attr">deck</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"mb-3"</span>&gt;</span>
      <span class="hljs-tag">&lt;<span class="hljs-name">b-card</span> <span class="hljs-attr">border-variant</span>=<span class="hljs-string">"light"</span> <span class="hljs-attr">header</span>=<span class="hljs-string">"Light"</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"text-center"</span>&gt;</span>
        <span class="hljs-tag">&lt;<span class="hljs-name">b-card-text</span>&gt;</span>Lorem ipsum dolor sit amet, consectetur adipiscing elit.<span class="hljs-tag">&lt;/<span class="hljs-name">b-card-text</span>&gt;</span>
      <span class="hljs-tag">&lt;/<span class="hljs-name">b-card</span>&gt;</span>

      <span class="hljs-tag">&lt;<span class="hljs-name">b-card</span> <span class="hljs-attr">border-variant</span>=<span class="hljs-string">"dark"</span> <span class="hljs-attr">header</span>=<span class="hljs-string">"Dark"</span> <span class="hljs-attr">align</span>=<span class="hljs-string">"center"</span>&gt;</span>
        <span class="hljs-tag">&lt;<span class="hljs-name">b-card-text</span>&gt;</span>Lorem ipsum dolor sit amet, consectetur adipiscing elit.<span class="hljs-tag">&lt;/<span class="hljs-name">b-card-text</span>&gt;</span>
      <span class="hljs-tag">&lt;/<span class="hljs-name">b-card</span>&gt;</span>
    <span class="hljs-tag">&lt;/<span class="hljs-name">b-card-group</span>&gt;</span>
  <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
<span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span></pre></figure>
        <h4 id="variant-to-class-mapping" class="bv-no-focus-ring"><span class="bd-content-title">变量到类的映射<a
              class="anchorjs-link" href="#variant-to-class-mapping"
              aria-labelledby="variant-to-class-mapping"></a></span></h4>
        <p>BootstrapVue <code translate="no" class="notranslate text-nowrap">&lt;b-card&gt;</code> 变量直接映射到 Bootstrap v4
          卡片类，通过预先挂起的 <code translate="no" class="notranslate text-nowrap">bg-</code> (对于 solid) 或 <code translate="no"
            class="notranslate text-nowrap">border-</code> (对于 bordered) 映射到上述变量名。</p>
        <h3 id="header-and-footer-variants" class="bv-no-focus-ring"><span class="bd-content-title">页眉和页脚变量<a
              class="anchorjs-link" href="#header-and-footer-variants"
              aria-labelledby="header-and-footer-variants"></a></span></h3>
        <p>您还可以通过 <code translate="no" class="notranslate text-nowrap">header-bg-variant</code>， <code translate="no"
            class="notranslate text-nowrap">header-border-variant</code>， <code translate="no"
            class="notranslate text-nowrap">header-text-variant</code>， <code translate="no"
            class="notranslate text-nowrap">footer-bg-variant</code>， <code translate="no"
            class="notranslate text-nowrap">footer-border-variant</code>，和 <code translate="no"
            class="notranslate text-nowrap">footer-text-variant</code> 属性将 solid 和 border 变量应用于卡片的页眉和页脚和和页脚变量</p>
        <div translate="translate" class="bd-example vue-example vue-example-b-card-header-footer-variant notranslate">
          <div>
            <div class="card" style="max-width: 20rem;">
              <header class="card-header bg-dark text-white">
                <div>Card Header</div>
              </header>
              <div class="card-body">
                <h4 class="card-title">Title</h4>
                <p class="card-text">Header and footers variants.</p>
              </div>
              <footer class="card-footer bg-success border-dark">
                <div>Card Footer</div>
              </footer>
            </div>
          </div>
        </div>
        <figure class="highlight">
        <pre class="hljs html text-monospace p-2 notranslate xml editable" translate="no"><span class="hljs-tag">&lt;<span class="hljs-name">div</span>&gt;</span>
  <span class="hljs-tag">&lt;<span class="hljs-name">b-card</span>
    <span class="hljs-attr">header</span>=<span class="hljs-string">"Card Header"</span>
    <span class="hljs-attr">header-text-variant</span>=<span class="hljs-string">"white"</span>
    <span class="hljs-attr">header-tag</span>=<span class="hljs-string">"header"</span>
    <span class="hljs-attr">header-bg-variant</span>=<span class="hljs-string">"dark"</span>
    <span class="hljs-attr">footer</span>=<span class="hljs-string">"Card Footer"</span>
    <span class="hljs-attr">footer-tag</span>=<span class="hljs-string">"footer"</span>
    <span class="hljs-attr">footer-bg-variant</span>=<span class="hljs-string">"success"</span>
    <span class="hljs-attr">footer-border-variant</span>=<span class="hljs-string">"dark"</span>
    <span class="hljs-attr">title</span>=<span class="hljs-string">"Title"</span>
    <span class="hljs-attr">style</span>=<span class="hljs-string">"max-width: 20rem;"</span>
  &gt;</span>
    <span class="hljs-tag">&lt;<span class="hljs-name">b-card-text</span>&gt;</span>Header and footers variants.<span class="hljs-tag">&lt;/<span class="hljs-name">b-card-text</span>&gt;</span>
  <span class="hljs-tag">&lt;/<span class="hljs-name">b-card</span>&gt;</span>
<span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span></pre></figure>
        <h3 id="conveying-meaning-to-assistive-technologies" class="bv-no-focus-ring"><span
            class="bd-content-title">传输含义来辅助技术<a class="anchorjs-link"
              href="#conveying-meaning-to-assistive-technologies"
              aria-labelledby="conveying-meaning-to-assistive-technologies"></a></span></h3>
        <p>使用颜色添加含义仅提供视觉指示，而不会传达给辅助技术的用户（例如屏幕阅读器）。 确保用颜色表示的信息从内容本身来看是显而易见的（例如，可见文本），或者通过其他方式包括在其中，例如用 <code
            translate="no" class="notranslate text-nowrap">.sr-only</code> 类隐藏的其他文本。</p>
        <h2 id="nav-integration" class="bv-no-focus-ring"><span class="bd-content-title">导航集成<a class="anchorjs-link"
              href="#nav-integration" aria-labelledby="nav-integration"></a></span></h2>
        <p>将 <a href="../../../bootstrap-vue/docs/components/nav" class="font-weight-bold"><code translate="no"
              class="notranslate text-nowrap">&lt;b-nav&gt;</code></a> 轻松集成到卡片页眉中。</p>
        <p><strong>使用（页眉） <code translate="no" class="notranslate text-nowrap">header</code> 插槽</strong>：</p>
        <div translate="translate" class="bd-example vue-example vue-example-card-with-nav-header-slot notranslate">
          <div>
            <div class="card">
              <nav class="card-header">
                <ul class="nav nav-tabs card-header-tabs">
                  <li class="nav-item"><a target="_self" href="#" class="nav-link active">Active</a></li>
                  <li class="nav-item"><a target="_self" href="#" class="nav-link">Inactive</a></li>
                  <li class="nav-item"><a target="_self" tabindex="-1" aria-disabled="true" href="#"
                      class="nav-link disabled">Disabled</a></li>
                </ul>
              </nav>
              <div class="card-body text-center">
                <h4 class="card-title">Card Title</h4>
                <p class="card-text"> With supporting text below as a natural lead-in to additional content. </p>
                <button type="button" class="btn btn-primary">Go somewhere</button>
              </div>
            </div>
          </div>
        </div>
        <figure class="highlight">
        <pre class="hljs html text-monospace p-2 notranslate xml editable" translate="no"><span class="hljs-tag">&lt;<span class="hljs-name">div</span>&gt;</span>
  <span class="hljs-tag">&lt;<span class="hljs-name">b-card</span> <span class="hljs-attr">title</span>=<span class="hljs-string">"Card Title"</span> <span class="hljs-attr">body-class</span>=<span class="hljs-string">"text-center"</span> <span class="hljs-attr">header-tag</span>=<span class="hljs-string">"nav"</span>&gt;</span>
    <span class="hljs-tag">&lt;<span class="hljs-name">template</span> <span class="hljs-attr">v-slot:header</span>&gt;</span>
      <span class="hljs-tag">&lt;<span class="hljs-name">b-nav</span> <span class="hljs-attr">card-header</span> <span class="hljs-attr">tabs</span>&gt;</span>
        <span class="hljs-tag">&lt;<span class="hljs-name">b-nav-item</span> <span class="hljs-attr">active</span>&gt;</span>Active<span class="hljs-tag">&lt;/<span class="hljs-name">b-nav-item</span>&gt;</span>
        <span class="hljs-tag">&lt;<span class="hljs-name">b-nav-item</span>&gt;</span>Inactive<span class="hljs-tag">&lt;/<span class="hljs-name">b-nav-item</span>&gt;</span>
        <span class="hljs-tag">&lt;<span class="hljs-name">b-nav-item</span> <span class="hljs-attr">disabled</span>&gt;</span>Disabled<span class="hljs-tag">&lt;/<span class="hljs-name">b-nav-item</span>&gt;</span>
      <span class="hljs-tag">&lt;/<span class="hljs-name">b-nav</span>&gt;</span>
    <span class="hljs-tag">&lt;/<span class="hljs-name">template</span>&gt;</span>

    <span class="hljs-tag">&lt;<span class="hljs-name">b-card-text</span>&gt;</span>
      With supporting text below as a natural lead-in to additional content.
    <span class="hljs-tag">&lt;/<span class="hljs-name">b-card-text</span>&gt;</span>

    <span class="hljs-tag">&lt;<span class="hljs-name">b-button</span> <span class="hljs-attr">variant</span>=<span class="hljs-string">"primary"</span>&gt;</span>Go somewhere<span class="hljs-tag">&lt;/<span class="hljs-name">b-button</span>&gt;</span>
  <span class="hljs-tag">&lt;/<span class="hljs-name">b-card</span>&gt;</span>
<span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span></pre></figure>
        <p><strong>使用 <code translate="no" class="notranslate text-nowrap">&lt;b-card-header&gt;</code>
            子组件：</strong></p>
        <div translate="translate"
          class="bd-example vue-example vue-example-card-with-nav-header-component notranslate">
          <div>
            <div class="card">
              <nav class="card-header">
                <ul class="nav nav-tabs card-header-tabs">
                  <li class="nav-item"><a target="_self" href="#" class="nav-link active">Active</a></li>
                  <li class="nav-item"><a target="_self" href="#" class="nav-link">Inactive</a></li>
                  <li class="nav-item"><a target="_self" tabindex="-1" aria-disabled="true" href="#"
                      class="nav-link disabled">Disabled</a></li>
                </ul>
              </nav>
              <div class="card-body text-center">
                <h4 class="card-title">Card Title</h4>
                <p class="card-text"> With supporting text below as a natural lead-in to additional content. </p>
                <button type="button" class="btn btn-primary">Go somewhere</button>
              </div>
            </div>
          </div>
        </div>
        <figure class="highlight">
        <pre class="hljs html text-monospace p-2 notranslate xml editable" translate="no"><span class="hljs-tag">&lt;<span class="hljs-name">div</span>&gt;</span>
  <span class="hljs-tag">&lt;<span class="hljs-name">b-card</span> <span class="hljs-attr">no-body</span>&gt;</span>
    <span class="hljs-tag">&lt;<span class="hljs-name">b-card-header</span> <span class="hljs-attr">header-tag</span>=<span class="hljs-string">"nav"</span>&gt;</span>
      <span class="hljs-tag">&lt;<span class="hljs-name">b-nav</span> <span class="hljs-attr">card-header</span> <span class="hljs-attr">tabs</span>&gt;</span>
        <span class="hljs-tag">&lt;<span class="hljs-name">b-nav-item</span> <span class="hljs-attr">active</span>&gt;</span>Active<span class="hljs-tag">&lt;/<span class="hljs-name">b-nav-item</span>&gt;</span>
        <span class="hljs-tag">&lt;<span class="hljs-name">b-nav-item</span>&gt;</span>Inactive<span class="hljs-tag">&lt;/<span class="hljs-name">b-nav-item</span>&gt;</span>
        <span class="hljs-tag">&lt;<span class="hljs-name">b-nav-item</span> <span class="hljs-attr">disabled</span>&gt;</span>Disabled<span class="hljs-tag">&lt;/<span class="hljs-name">b-nav-item</span>&gt;</span>
      <span class="hljs-tag">&lt;/<span class="hljs-name">b-nav</span>&gt;</span>
    <span class="hljs-tag">&lt;/<span class="hljs-name">b-card-header</span>&gt;</span>

    <span class="hljs-tag">&lt;<span class="hljs-name">b-card-body</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"text-center"</span>&gt;</span>
      <span class="hljs-tag">&lt;<span class="hljs-name">b-card-title</span>&gt;</span>Card Title<span class="hljs-tag">&lt;/<span class="hljs-name">b-card-title</span>&gt;</span>

      <span class="hljs-tag">&lt;<span class="hljs-name">b-card-text</span>&gt;</span>
        With supporting text below as a natural lead-in to additional content.
      <span class="hljs-tag">&lt;/<span class="hljs-name">b-card-text</span>&gt;</span>

      <span class="hljs-tag">&lt;<span class="hljs-name">b-button</span> <span class="hljs-attr">variant</span>=<span class="hljs-string">"primary"</span>&gt;</span>Go somewhere<span class="hljs-tag">&lt;/<span class="hljs-name">b-button</span>&gt;</span>
    <span class="hljs-tag">&lt;/<span class="hljs-name">b-card-body</span>&gt;</span>
  <span class="hljs-tag">&lt;/<span class="hljs-name">b-card</span>&gt;</span>
<span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span></pre></figure>
        <p>有关在卡片页眉中使用 <code translate="no" class="notranslate text-nowrap">&lt;b-nav&gt;</code> 的更多信息，请参阅 <a
            href="../../../bootstrap-vue/docs/components/nav" class="font-weight-bold">导航文档</a> 。</p>
        <h2 id="card-groups" class="bv-no-focus-ring"><span class="bd-content-title">Card groups<a class="anchorjs-link"
              href="#card-groups" aria-labelledby="card-groups"></a></span></h2>
        <p>In addition to styling the content within cards, BootstrapVue includes a <code translate="no"
            class="notranslate text-nowrap">&lt;b-card-group&gt;</code> component
          for laying out series of cards. For the time being, these layout options are not yet responsive.</p>
        <h3 id="default-card-group" class="bv-no-focus-ring"><span class="bd-content-title">Default card group<a
              class="anchorjs-link" href="#default-card-group" aria-labelledby="default-card-group"></a></span></h3>
        <p>Use card groups to render cards as a single, attached element with equal width and height columns.
          Card groups use display: flex; to achieve their uniform sizing.</p>
        <p>When using card groups with footers, their content will automatically line up.</p>
        <div translate="translate" class="bd-example vue-example vue-example-b-card-group notranslate">
          <div>
            <div class="card-group">
              <div class="card"><img src="https://placekitten.com/g/300/450" alt="Image" class="card-img-top">
                <div class="card-body">
                  <h4 class="card-title">Title</h4>
                  <p class="card-text"> This is a wider card with supporting text below as a natural lead-in to
                    additional content.
                    This content is a little bit longer. </p>
                </div>
                <div class="card-footer"><small class="text-muted">Last updated 3 mins ago</small></div>
              </div>
              <div class="card"><img src="https://placekitten.com/g/300/450" alt="Image" class="card-img-top">
                <div class="card-body">
                  <h4 class="card-title">Title</h4>
                  <p class="card-text"> This card has supporting text below as a natural lead-in to additional content.
                  </p>
                </div>
                <div class="card-footer"><small class="text-muted">Last updated 3 mins ago</small></div>
              </div>
              <div class="card"><img src="https://placekitten.com/g/300/450" alt="Image" class="card-img-top">
                <div class="card-body">
                  <h4 class="card-title">Title</h4>
                  <p class="card-text"> This is a wider card with supporting text below as a natural lead-in to
                    additional content.
                    This card has even longer content than the first to show that equal height action. </p>
                </div>
                <div class="card-footer"><small class="text-muted">Last updated 3 mins ago</small></div>
              </div>
            </div>
          </div>
        </div>
        <figure class="highlight">
        <pre class="hljs html text-monospace p-2 notranslate xml editable" translate="no"><span class="hljs-tag">&lt;<span class="hljs-name">div</span>&gt;</span>
  <span class="hljs-tag">&lt;<span class="hljs-name">b-card-group</span>&gt;</span>
    <span class="hljs-tag">&lt;<span class="hljs-name">b-card</span> <span class="hljs-attr">title</span>=<span class="hljs-string">"Title"</span> <span class="hljs-attr">img-src</span>=<span class="hljs-string">"https://placekitten.com/g/300/450"</span> <span class="hljs-attr">img-alt</span>=<span class="hljs-string">"Image"</span> <span class="hljs-attr">img-top</span>&gt;</span>
      <span class="hljs-tag">&lt;<span class="hljs-name">b-card-text</span>&gt;</span>
        This is a wider card with supporting text below as a natural lead-in to additional content.
        This content is a little bit longer.
      <span class="hljs-tag">&lt;/<span class="hljs-name">b-card-text</span>&gt;</span>
      <span class="hljs-tag">&lt;<span class="hljs-name">template</span> <span class="hljs-attr">v-slot:footer</span>&gt;</span>
        <span class="hljs-tag">&lt;<span class="hljs-name">small</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"text-muted"</span>&gt;</span>Last updated 3 mins ago<span class="hljs-tag">&lt;/<span class="hljs-name">small</span>&gt;</span>
      <span class="hljs-tag">&lt;/<span class="hljs-name">template</span>&gt;</span>
    <span class="hljs-tag">&lt;/<span class="hljs-name">b-card</span>&gt;</span>

    <span class="hljs-tag">&lt;<span class="hljs-name">b-card</span> <span class="hljs-attr">title</span>=<span class="hljs-string">"Title"</span> <span class="hljs-attr">img-src</span>=<span class="hljs-string">"https://placekitten.com/g/300/450"</span> <span class="hljs-attr">img-alt</span>=<span class="hljs-string">"Image"</span> <span class="hljs-attr">img-top</span>&gt;</span>
      <span class="hljs-tag">&lt;<span class="hljs-name">b-card-text</span>&gt;</span>
        This card has supporting text below as a natural lead-in to additional content.
      <span class="hljs-tag">&lt;/<span class="hljs-name">b-card-text</span>&gt;</span>
      <span class="hljs-tag">&lt;<span class="hljs-name">template</span> <span class="hljs-attr">v-slot:footer</span>&gt;</span>
        <span class="hljs-tag">&lt;<span class="hljs-name">small</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"text-muted"</span>&gt;</span>Last updated 3 mins ago<span class="hljs-tag">&lt;/<span class="hljs-name">small</span>&gt;</span>
      <span class="hljs-tag">&lt;/<span class="hljs-name">template</span>&gt;</span>
    <span class="hljs-tag">&lt;/<span class="hljs-name">b-card</span>&gt;</span>

    <span class="hljs-tag">&lt;<span class="hljs-name">b-card</span> <span class="hljs-attr">title</span>=<span class="hljs-string">"Title"</span> <span class="hljs-attr">img-src</span>=<span class="hljs-string">"https://placekitten.com/g/300/450"</span> <span class="hljs-attr">img-alt</span>=<span class="hljs-string">"Image"</span> <span class="hljs-attr">img-top</span>&gt;</span>
      <span class="hljs-tag">&lt;<span class="hljs-name">b-card-text</span>&gt;</span>
        This is a wider card with supporting text below as a natural lead-in to additional content.
        This card has even longer content than the first to show that equal height action.
      <span class="hljs-tag">&lt;/<span class="hljs-name">b-card-text</span>&gt;</span>
      <span class="hljs-tag">&lt;<span class="hljs-name">template</span> <span class="hljs-attr">v-slot:footer</span>&gt;</span>
        <span class="hljs-tag">&lt;<span class="hljs-name">small</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"text-muted"</span>&gt;</span>Last updated 3 mins ago<span class="hljs-tag">&lt;/<span class="hljs-name">small</span>&gt;</span>
      <span class="hljs-tag">&lt;/<span class="hljs-name">template</span>&gt;</span>
    <span class="hljs-tag">&lt;/<span class="hljs-name">b-card</span>&gt;</span>
  <span class="hljs-tag">&lt;/<span class="hljs-name">b-card-group</span>&gt;</span>
<span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span></pre></figure>
        <h3 id="card-deck-groups" class="bv-no-focus-ring"><span class="bd-content-title">Card deck groups<a
              class="anchorjs-link" href="#card-deck-groups" aria-labelledby="card-deck-groups"></a></span></h3>
        <p>Need a set of equal width and height cards that aren't attached to one another? Use card decks by
          setting the <code translate="no" class="notranslate text-nowrap">deck</code> prop. And just like with regular
          card groups, card footers in decks will
          automatically line up.</p>
        <div translate="translate" class="bd-example vue-example vue-example-b-card-group-deck notranslate">
          <div>
            <div class="card-deck">
              <div class="card"><img src="https://picsum.photos/300/300/?image=41" alt="Image" class="card-img-top">
                <div class="card-body">
                  <h4 class="card-title">Title</h4>
                  <p class="card-text"> This is a wider card with supporting text below as a natural lead-in to
                    additional content.
                    This content is a little bit longer. </p>
                </div>
                <div class="card-footer"><small class="text-muted">Last updated 3 mins ago</small></div>
              </div>
              <div class="card"><img src="https://picsum.photos/300/300/?image=41" alt="Image" class="card-img-top">
                <div class="card-body">
                  <h4 class="card-title">Title</h4>
                  <p class="card-text"> This card has supporting text below as a natural lead-in to additional content.
                  </p>
                </div>
                <div class="card-footer"><small class="text-muted">Last updated 3 mins ago</small></div>
              </div>
              <div class="card"><img src="https://picsum.photos/300/300/?image=41" alt="Image" class="card-img-top">
                <div class="card-body">
                  <h4 class="card-title">Title</h4>
                  <p class="card-text"> This is a wider card with supporting text below as a natural lead-in to
                    additional content.
                    This card has even longer content than the first to show that equal height action. </p>
                </div>
                <div class="card-footer"><small class="text-muted">Last updated 3 mins ago</small></div>
              </div>
            </div>
          </div>
        </div>
        <figure class="highlight">
        <pre class="hljs html text-monospace p-2 notranslate xml editable" translate="no"><span class="hljs-tag">&lt;<span class="hljs-name">div</span>&gt;</span>
  <span class="hljs-tag">&lt;<span class="hljs-name">b-card-group</span> <span class="hljs-attr">deck</span>&gt;</span>
    <span class="hljs-tag">&lt;<span class="hljs-name">b-card</span> <span class="hljs-attr">title</span>=<span class="hljs-string">"Title"</span> <span class="hljs-attr">img-src</span>=<span class="hljs-string">"https://picsum.photos/300/300/?image=41"</span> <span class="hljs-attr">img-alt</span>=<span class="hljs-string">"Image"</span> <span class="hljs-attr">img-top</span>&gt;</span>
      <span class="hljs-tag">&lt;<span class="hljs-name">b-card-text</span>&gt;</span>
        This is a wider card with supporting text below as a natural lead-in to additional content.
        This content is a little bit longer.
      <span class="hljs-tag">&lt;/<span class="hljs-name">b-card-text</span>&gt;</span>
      <span class="hljs-tag">&lt;<span class="hljs-name">template</span> <span class="hljs-attr">v-slot:footer</span>&gt;</span>
        <span class="hljs-tag">&lt;<span class="hljs-name">small</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"text-muted"</span>&gt;</span>Last updated 3 mins ago<span class="hljs-tag">&lt;/<span class="hljs-name">small</span>&gt;</span>
      <span class="hljs-tag">&lt;/<span class="hljs-name">template</span>&gt;</span>
    <span class="hljs-tag">&lt;/<span class="hljs-name">b-card</span>&gt;</span>

    <span class="hljs-tag">&lt;<span class="hljs-name">b-card</span> <span class="hljs-attr">title</span>=<span class="hljs-string">"Title"</span> <span class="hljs-attr">img-src</span>=<span class="hljs-string">"https://picsum.photos/300/300/?image=41"</span> <span class="hljs-attr">img-alt</span>=<span class="hljs-string">"Image"</span> <span class="hljs-attr">img-top</span>&gt;</span>
      <span class="hljs-tag">&lt;<span class="hljs-name">b-card-text</span>&gt;</span>
        This card has supporting text below as a natural lead-in to additional content.
      <span class="hljs-tag">&lt;/<span class="hljs-name">b-card-text</span>&gt;</span>
      <span class="hljs-tag">&lt;<span class="hljs-name">template</span> <span class="hljs-attr">v-slot:footer</span>&gt;</span>
        <span class="hljs-tag">&lt;<span class="hljs-name">small</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"text-muted"</span>&gt;</span>Last updated 3 mins ago<span class="hljs-tag">&lt;/<span class="hljs-name">small</span>&gt;</span>
      <span class="hljs-tag">&lt;/<span class="hljs-name">template</span>&gt;</span>
    <span class="hljs-tag">&lt;/<span class="hljs-name">b-card</span>&gt;</span>

    <span class="hljs-tag">&lt;<span class="hljs-name">b-card</span> <span class="hljs-attr">title</span>=<span class="hljs-string">"Title"</span> <span class="hljs-attr">img-src</span>=<span class="hljs-string">"https://picsum.photos/300/300/?image=41"</span> <span class="hljs-attr">img-alt</span>=<span class="hljs-string">"Image"</span> <span class="hljs-attr">img-top</span>&gt;</span>
      <span class="hljs-tag">&lt;<span class="hljs-name">b-card-text</span>&gt;</span>
        This is a wider card with supporting text below as a natural lead-in to additional content.
        This card has even longer content than the first to show that equal height action.
      <span class="hljs-tag">&lt;/<span class="hljs-name">b-card-text</span>&gt;</span>
      <span class="hljs-tag">&lt;<span class="hljs-name">template</span> <span class="hljs-attr">v-slot:footer</span>&gt;</span>
        <span class="hljs-tag">&lt;<span class="hljs-name">small</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"text-muted"</span>&gt;</span>Last updated 3 mins ago<span class="hljs-tag">&lt;/<span class="hljs-name">small</span>&gt;</span>
      <span class="hljs-tag">&lt;/<span class="hljs-name">template</span>&gt;</span>
    <span class="hljs-tag">&lt;/<span class="hljs-name">b-card</span>&gt;</span>
  <span class="hljs-tag">&lt;/<span class="hljs-name">b-card-group</span>&gt;</span>
<span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span></pre></figure>
        <h3 id="card-column-groups" class="bv-no-focus-ring"><span class="bd-content-title">Card column groups<a
              class="anchorjs-link" href="#card-column-groups" aria-labelledby="card-column-groups"></a></span></h3>
        <p>Cards can be organized into Masonry-like columns with by wrapping them in a <code translate="no"
            class="notranslate text-nowrap">&lt;b-card-group&gt;</code> with
          the prop <code translate="no" class="notranslate text-nowrap">columns</code> set. Cards are built with CSS
          column properties instead of flexbox for easier
          alignment. Cards are ordered from top to bottom and left to right.</p>
        <p>Heads up! Your mileage with card columns may vary. To prevent cards breaking across columns, we must
          set them to display: inline-block as column-break-inside: avoid isn't a bulletproof solution yet.</p>
        <div translate="translate" class="bd-example vue-example vue-example-b-card-group-columns notranslate">
          <div>
            <div class="card-columns">
              <div class="card"><img src="https://placekitten.com/g/400/450" alt="Image" class="card-img-top">
                <div class="card-body">
                  <h4 class="card-title">Card title that wraps to a new line</h4>
                  <p class="card-text"> This is a wider card with supporting text below as a natural lead-in to
                    additional content.
                    This content is a little bit longer. </p>
                </div>
              </div>
              <div class="card">
                <div class="card-header">
                  <div>Quote</div>
                </div>
                <div class="card-body">
                  <blockquote class="blockquote mb-0">
                    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
                    <footer class="blockquote-footer"> Someone famous in <cite title="Source Title">Source Title</cite>
                    </footer>
                  </blockquote>
                </div>
              </div>
              <div class="card"><img src="https://placekitten.com/500/350" alt="Image" class="card-img-top">
                <div class="card-body">
                  <h4 class="card-title">Title</h4>
                  <p class="card-text"> This card has supporting text below as a natural lead-in to additional content.
                  </p>
                  <p class="card-text small text-muted">Last updated 3 mins ago</p>
                </div>
              </div>
              <div class="card bg-primary text-white">
                <div class="card-body">
                  <blockquote class="card-blockquote">
                    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
                    <footer><small>Someone famous in <cite title="Source Title">Source Title</cite></small></footer>
                  </blockquote>
                </div>
              </div>
              <div class="card">
                <div class="card-body">
                  <h4 class="card-title">Title</h4>
                  <p class="card-text"> This card has supporting text below as a natural lead-in to additional content.
                  </p>
                  <p class="card-text small text-muted">Last updated 3 mins ago</p>
                </div>
              </div>
              <div class="card"><img src="https://picsum.photos/400/400/?image=41" alt="Image" class="card-img">
                <div class="card-body card-img-overlay"></div>
              </div>
              <div class="card"><img src="https://picsum.photos/400/200/?image=41" alt="Image" class="card-img-top">
                <div class="card-body">
                  <p class="card-text"> This is a wider card with supporting text below as a natural lead-in to
                    additional content.
                    This card has even longer content than the first. </p>
                </div>
                <div class="card-footer"><small class="text-muted">Footer Text</small></div>
              </div>
            </div>
          </div>
        </div>
        <figure class="highlight">
        <pre class="hljs html text-monospace p-2 notranslate xml editable" translate="no"><span class="hljs-tag">&lt;<span class="hljs-name">div</span>&gt;</span>
  <span class="hljs-tag">&lt;<span class="hljs-name">b-card-group</span> <span class="hljs-attr">columns</span>&gt;</span>
    <span class="hljs-tag">&lt;<span class="hljs-name">b-card</span>
      <span class="hljs-attr">title</span>=<span class="hljs-string">"Card title that wraps to a new line"</span>
      <span class="hljs-attr">img-src</span>=<span class="hljs-string">"https://placekitten.com/g/400/450"</span>
      <span class="hljs-attr">img-alt</span>=<span class="hljs-string">"Image"</span>
      <span class="hljs-attr">img-top</span>
    &gt;</span>
      <span class="hljs-tag">&lt;<span class="hljs-name">b-card-text</span>&gt;</span>
        This is a wider card with supporting text below as a natural lead-in to additional content.
        This content is a little bit longer.
      <span class="hljs-tag">&lt;/<span class="hljs-name">b-card-text</span>&gt;</span>
    <span class="hljs-tag">&lt;/<span class="hljs-name">b-card</span>&gt;</span>

    <span class="hljs-tag">&lt;<span class="hljs-name">b-card</span> <span class="hljs-attr">header</span>=<span class="hljs-string">"Quote"</span>&gt;</span>
      <span class="hljs-tag">&lt;<span class="hljs-name">blockquote</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"blockquote mb-0"</span>&gt;</span>
        <span class="hljs-tag">&lt;<span class="hljs-name">p</span>&gt;</span>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.<span class="hljs-tag">&lt;/<span class="hljs-name">p</span>&gt;</span>
        <span class="hljs-tag">&lt;<span class="hljs-name">footer</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"blockquote-footer"</span>&gt;</span>
          Someone famous in <span class="hljs-tag">&lt;<span class="hljs-name">cite</span> <span class="hljs-attr">title</span>=<span class="hljs-string">"Source Title"</span>&gt;</span>Source Title<span class="hljs-tag">&lt;/<span class="hljs-name">cite</span>&gt;</span>
        <span class="hljs-tag">&lt;/<span class="hljs-name">footer</span>&gt;</span>
      <span class="hljs-tag">&lt;/<span class="hljs-name">blockquote</span>&gt;</span>
    <span class="hljs-tag">&lt;/<span class="hljs-name">b-card</span>&gt;</span>

    <span class="hljs-tag">&lt;<span class="hljs-name">b-card</span> <span class="hljs-attr">title</span>=<span class="hljs-string">"Title"</span> <span class="hljs-attr">img-src</span>=<span class="hljs-string">"https://placekitten.com/500/350"</span> <span class="hljs-attr">img-alt</span>=<span class="hljs-string">"Image"</span> <span class="hljs-attr">img-top</span>&gt;</span>
      <span class="hljs-tag">&lt;<span class="hljs-name">b-card-text</span>&gt;</span>
        This card has supporting text below as a natural lead-in to additional content.
      <span class="hljs-tag">&lt;/<span class="hljs-name">b-card-text</span>&gt;</span>
      <span class="hljs-tag">&lt;<span class="hljs-name">b-card-text</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"small text-muted"</span>&gt;</span>Last updated 3 mins ago<span class="hljs-tag">&lt;/<span class="hljs-name">b-card-text</span>&gt;</span>
    <span class="hljs-tag">&lt;/<span class="hljs-name">b-card</span>&gt;</span>

    <span class="hljs-tag">&lt;<span class="hljs-name">b-card</span> <span class="hljs-attr">bg-variant</span>=<span class="hljs-string">"primary"</span> <span class="hljs-attr">text-variant</span>=<span class="hljs-string">"white"</span>&gt;</span>
      <span class="hljs-tag">&lt;<span class="hljs-name">blockquote</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"card-blockquote"</span>&gt;</span>
        <span class="hljs-tag">&lt;<span class="hljs-name">p</span>&gt;</span>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.<span class="hljs-tag">&lt;/<span class="hljs-name">p</span>&gt;</span>
        <span class="hljs-tag">&lt;<span class="hljs-name">footer</span>&gt;</span>
          <span class="hljs-tag">&lt;<span class="hljs-name">small</span>&gt;</span>Someone famous in <span class="hljs-tag">&lt;<span class="hljs-name">cite</span> <span class="hljs-attr">title</span>=<span class="hljs-string">"Source Title"</span>&gt;</span>Source Title<span class="hljs-tag">&lt;/<span class="hljs-name">cite</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">small</span>&gt;</span>
        <span class="hljs-tag">&lt;/<span class="hljs-name">footer</span>&gt;</span>
      <span class="hljs-tag">&lt;/<span class="hljs-name">blockquote</span>&gt;</span>
    <span class="hljs-tag">&lt;/<span class="hljs-name">b-card</span>&gt;</span>

    <span class="hljs-tag">&lt;<span class="hljs-name">b-card</span>&gt;</span>
      <span class="hljs-tag">&lt;<span class="hljs-name">b-card-title</span>&gt;</span>Title<span class="hljs-tag">&lt;/<span class="hljs-name">b-card-title</span>&gt;</span>
      <span class="hljs-tag">&lt;<span class="hljs-name">b-card-text</span>&gt;</span>
        This card has supporting text below as a natural lead-in to additional content.
      <span class="hljs-tag">&lt;/<span class="hljs-name">b-card-text</span>&gt;</span>
      <span class="hljs-tag">&lt;<span class="hljs-name">b-card-text</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"small text-muted"</span>&gt;</span>Last updated 3 mins ago<span class="hljs-tag">&lt;/<span class="hljs-name">b-card-text</span>&gt;</span>
    <span class="hljs-tag">&lt;/<span class="hljs-name">b-card</span>&gt;</span>

    <span class="hljs-tag">&lt;<span class="hljs-name">b-card</span> <span class="hljs-attr">img-src</span>=<span class="hljs-string">"https://picsum.photos/400/400/?image=41"</span> <span class="hljs-attr">img-alt</span>=<span class="hljs-string">"Image"</span> <span class="hljs-attr">overlay</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">b-card</span>&gt;</span>

    <span class="hljs-tag">&lt;<span class="hljs-name">b-card</span> <span class="hljs-attr">img-src</span>=<span class="hljs-string">"https://picsum.photos/400/200/?image=41"</span> <span class="hljs-attr">img-alt</span>=<span class="hljs-string">"Image"</span> <span class="hljs-attr">img-top</span>&gt;</span>
      <span class="hljs-tag">&lt;<span class="hljs-name">b-card-text</span>&gt;</span>
        This is a wider card with supporting text below as a natural lead-in to additional content.
        This card has even longer content than the first.
      <span class="hljs-tag">&lt;/<span class="hljs-name">b-card-text</span>&gt;</span>
      <span class="hljs-tag">&lt;<span class="hljs-name">template</span> <span class="hljs-attr">v-slot:footer</span>&gt;</span>
        <span class="hljs-tag">&lt;<span class="hljs-name">small</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"text-muted"</span>&gt;</span>Footer Text<span class="hljs-tag">&lt;/<span class="hljs-name">small</span>&gt;</span>
      <span class="hljs-tag">&lt;/<span class="hljs-name">template</span>&gt;</span>
    <span class="hljs-tag">&lt;/<span class="hljs-name">b-card</span>&gt;</span>
  <span class="hljs-tag">&lt;/<span class="hljs-name">b-card-group</span>&gt;</span>
<span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span></pre></figure>
        <!-- Component reference added automatically from component package.json -->

        <h2 id="component-reference" tabindex="-1" class="bv-no-focus-ring"><span class="bd-content-title">Component
            reference<a href="../../../bootstrap-vue/docs/components/card#component-reference" class="anchorjs-link"
              aria-labelledby="component-reference" target="_self"></a></span></h2>
        <header data-v-866a22e8="" class="row align-items-center">
          <div data-v-866a22e8="" class="col-sm-9">
            <h3 data-v-866a22e8="" id="comp-ref-b-card" tabindex="-1" class="bv-no-focus-ring"><span data-v-866a22e8=""
                class="bd-content-title"><code data-v-866a22e8="" translate="translate"
                  class="notranslate bigger">&lt;b-card&gt;</code><a data-v-866a22e8=""
                  href="../../../bootstrap-vue/docs/components/card#comp-ref-b-card" class="anchorjs-link"
                  aria-labelledby="comp-ref-b-card" target="_self"></a></span></h3>
            <a data-v-866a22e8="" rel="noopener" target="_blank"
              href="https://vuejs.org/v2/guide/render-function.html#Functional-Components"
              class="badge badge-secondary"> Functional Component </a>
          </div>
          <div data-v-866a22e8="" class="text-sm-right col-sm-3"><a data-v-866a22e8="" rel="noopener" target="_blank"
              href="https://github.com/bootstrap-vue/bootstrap-vue/tree/dev/src/components/card/card.js"
              class="btn btn-outline-secondary btn-sm"> View source </a></div>
        </header>
        <ul data-v-866a22e8="" class="component-ref-mini-toc my-3">
          <li data-v-866a22e8=""><a data-v-866a22e8="" href="#comp-ref-b-card-props"><code data-v-866a22e8=""
                translate="translate" class="notranslate">&lt;b-card&gt;</code> Properties </a></li>
          <li data-v-866a22e8=""><a data-v-866a22e8="" href="#comp-ref-b-card-slots"><code data-v-866a22e8=""
                translate="translate" class="notranslate">&lt;b-card&gt;</code> Slots </a></li>
        </ul>
        <article data-v-866a22e8="" class="bd-content">
          <h4 data-v-866a22e8="" id="comp-ref-b-card-props" tabindex="-1" class="bv-no-focus-ring mb-3"><span
              data-v-866a22e8="" class="bd-content-title"> Properties <a data-v-866a22e8=""
                href="../../../bootstrap-vue/docs/components/card#comp-ref-b-card-props" class="anchorjs-link"
                aria-labelledby="comp-ref-b-card-props" target="_self"></a></span></h4>
          <div data-v-866a22e8="" class="table-responsive-sm">
            <table role="table" aria-busy="false" aria-colcount="4" class="table b-table bv-docs-table table-striped"
              id="__BVID__1207">
              <thead role="rowgroup" class="">
                <tr role="row" class="">
                  <th role="columnheader" scope="col" tabindex="0" aria-colindex="1" aria-sort="none"
                    class="b-table-sort-icon-left">Property<span class="sr-only"> (Click to sort Ascending)</span></th>
                  <th role="columnheader" scope="col" tabindex="0" aria-colindex="2" class="">Type</th>
                  <th role="columnheader" scope="col" tabindex="0" aria-colindex="3" class="">Default</th>
                  <th role="columnheader" scope="col" tabindex="0" aria-colindex="4" class="">Description</th>
                </tr>
              </thead>
              <tbody role="rowgroup">
                <tr role="row" data-pk="body-tag" class="" id="__BVID__1207__row_body-tag">
                  <td aria-colindex="1" role="cell" class=""><code data-v-866a22e8="" translate="translate"
                      class="text-nowrap notranslate">body-tag</code></td>
                  <td aria-colindex="2" role="cell" class="">String</td>
                  <td aria-colindex="3" role="cell" class=""><code data-v-866a22e8="" translate="translate"
                      class="word-wrap-normal notranslate">'div'</code></td>
                  <td aria-colindex="4" role="cell" class="">Specify the HTML tag to render instead of the default tag
                    for the body</td>
                </tr>
                <tr role="row" data-pk="body-bg-variant" class="" id="__BVID__1207__row_body-bg-variant">
                  <td aria-colindex="1" role="cell" class=""><code data-v-866a22e8="" translate="translate"
                      class="text-nowrap notranslate">body-bg-variant</code></td>
                  <td aria-colindex="2" role="cell" class="">String</td>
                  <td aria-colindex="3" role="cell" class=""></td>
                  <td aria-colindex="4" role="cell" class="">Applies one of the Bootstrap theme color variants to the
                    body background</td>
                </tr>
                <tr role="row" data-pk="body-border-variant" class="" id="__BVID__1207__row_body-border-variant">
                  <td aria-colindex="1" role="cell" class=""><code data-v-866a22e8="" translate="translate"
                      class="text-nowrap notranslate">body-border-variant</code></td>
                  <td aria-colindex="2" role="cell" class="">String</td>
                  <td aria-colindex="3" role="cell" class=""></td>
                  <td aria-colindex="4" role="cell" class="">Applies one of the Bootstrap theme color variants to the
                    body border</td>
                </tr>
                <tr role="row" data-pk="body-text-variant" class="" id="__BVID__1207__row_body-text-variant">
                  <td aria-colindex="1" role="cell" class=""><code data-v-866a22e8="" translate="translate"
                      class="text-nowrap notranslate">body-text-variant</code></td>
                  <td aria-colindex="2" role="cell" class="">String</td>
                  <td aria-colindex="3" role="cell" class=""></td>
                  <td aria-colindex="4" role="cell" class="">Applies one of the Bootstrap theme color variants to the
                    body text</td>
                </tr>
                <tr role="row" data-pk="body-class" class="" id="__BVID__1207__row_body-class">
                  <td aria-colindex="1" role="cell" class=""><code data-v-866a22e8="" translate="translate"
                      class="text-nowrap notranslate">body-class</code></td>
                  <td aria-colindex="2" role="cell" class="">String or Object or Array</td>
                  <td aria-colindex="3" role="cell" class=""></td>
                  <td aria-colindex="4" role="cell" class="">CSS class (or classes) to apply to the body</td>
                </tr>
                <tr role="row" data-pk="title" class="" id="__BVID__1207__row_title">
                  <td aria-colindex="1" role="cell" class=""><code data-v-866a22e8="" translate="translate"
                      class="text-nowrap notranslate">title</code></td>
                  <td aria-colindex="2" role="cell" class="">String</td>
                  <td aria-colindex="3" role="cell" class=""></td>
                  <td aria-colindex="4" role="cell" class="">Text content to place in the title</td>
                </tr>
                <tr role="row" data-pk="title-tag" class="" id="__BVID__1207__row_title-tag">
                  <td aria-colindex="1" role="cell" class=""><code data-v-866a22e8="" translate="translate"
                      class="text-nowrap notranslate">title-tag</code></td>
                  <td aria-colindex="2" role="cell" class="">String</td>
                  <td aria-colindex="3" role="cell" class=""><code data-v-866a22e8="" translate="translate"
                      class="word-wrap-normal notranslate">'h4'</code></td>
                  <td aria-colindex="4" role="cell" class="">Specify the HTML tag to render instead of the default tag
                    for the title</td>
                </tr>
                <tr role="row" data-pk="sub-title" class="" id="__BVID__1207__row_sub-title">
                  <td aria-colindex="1" role="cell" class=""><code data-v-866a22e8="" translate="translate"
                      class="text-nowrap notranslate">sub-title</code></td>
                  <td aria-colindex="2" role="cell" class="">String</td>
                  <td aria-colindex="3" role="cell" class=""></td>
                  <td aria-colindex="4" role="cell" class="">Text content to place in the sub title</td>
                </tr>
                <tr role="row" data-pk="sub-title-tag" class="" id="__BVID__1207__row_sub-title-tag">
                  <td aria-colindex="1" role="cell" class=""><code data-v-866a22e8="" translate="translate"
                      class="text-nowrap notranslate">sub-title-tag</code></td>
                  <td aria-colindex="2" role="cell" class="">String</td>
                  <td aria-colindex="3" role="cell" class=""><code data-v-866a22e8="" translate="translate"
                      class="word-wrap-normal notranslate">'h6'</code></td>
                  <td aria-colindex="4" role="cell" class="">Specify the HTML tag to render instead of the default tag
                    for the sub title</td>
                </tr>
                <tr role="row" data-pk="sub-title-text-variant" class="" id="__BVID__1207__row_sub-title-text-variant">
                  <td aria-colindex="1" role="cell" class=""><code data-v-866a22e8="" translate="translate"
                      class="text-nowrap notranslate">sub-title-text-variant</code></td>
                  <td aria-colindex="2" role="cell" class="">String</td>
                  <td aria-colindex="3" role="cell" class=""><code data-v-866a22e8="" translate="translate"
                      class="word-wrap-normal notranslate">'muted'</code></td>
                  <td aria-colindex="4" role="cell" class="">Applies one of the Bootstrap theme color variants to the
                    sub title text</td>
                </tr>
                <tr role="row" data-pk="overlay" class="" id="__BVID__1207__row_overlay">
                  <td aria-colindex="1" role="cell" class=""><code data-v-866a22e8="" translate="translate"
                      class="text-nowrap notranslate">overlay</code></td>
                  <td aria-colindex="2" role="cell" class="">Boolean</td>
                  <td aria-colindex="3" role="cell" class=""><code data-v-866a22e8="" translate="translate"
                      class="word-wrap-normal notranslate">false</code></td>
                  <td aria-colindex="4" role="cell" class="">When set, will overlay the card body on top of the image
                    (if the card has an image)</td>
                </tr>
                <tr role="row" data-pk="header-tag" class="" id="__BVID__1207__row_header-tag">
                  <td aria-colindex="1" role="cell" class=""><code data-v-866a22e8="" translate="translate"
                      class="text-nowrap notranslate">header-tag</code></td>
                  <td aria-colindex="2" role="cell" class="">String</td>
                  <td aria-colindex="3" role="cell" class=""><code data-v-866a22e8="" translate="translate"
                      class="word-wrap-normal notranslate">'div'</code></td>
                  <td aria-colindex="4" role="cell" class="">Specify the HTML tag to render instead of the default tag
                    for the header</td>
                </tr>
                <tr role="row" data-pk="header-bg-variant" class="" id="__BVID__1207__row_header-bg-variant">
                  <td aria-colindex="1" role="cell" class=""><code data-v-866a22e8="" translate="translate"
                      class="text-nowrap notranslate">header-bg-variant</code></td>
                  <td aria-colindex="2" role="cell" class="">String</td>
                  <td aria-colindex="3" role="cell" class=""></td>
                  <td aria-colindex="4" role="cell" class="">Applies one of the Bootstrap theme color variants to the
                    header background</td>
                </tr>
                <tr role="row" data-pk="header-border-variant" class="" id="__BVID__1207__row_header-border-variant">
                  <td aria-colindex="1" role="cell" class=""><code data-v-866a22e8="" translate="translate"
                      class="text-nowrap notranslate">header-border-variant</code></td>
                  <td aria-colindex="2" role="cell" class="">String</td>
                  <td aria-colindex="3" role="cell" class=""></td>
                  <td aria-colindex="4" role="cell" class="">Applies one of the Bootstrap theme color variants to the
                    header border</td>
                </tr>
                <tr role="row" data-pk="header-text-variant" class="" id="__BVID__1207__row_header-text-variant">
                  <td aria-colindex="1" role="cell" class=""><code data-v-866a22e8="" translate="translate"
                      class="text-nowrap notranslate">header-text-variant</code></td>
                  <td aria-colindex="2" role="cell" class="">String</td>
                  <td aria-colindex="3" role="cell" class=""></td>
                  <td aria-colindex="4" role="cell" class="">Applies one of the Bootstrap theme color variants to the
                    header text</td>
                </tr>
                <tr role="row" data-pk="header" class="" id="__BVID__1207__row_header">
                  <td aria-colindex="1" role="cell" class=""><code data-v-866a22e8="" translate="translate"
                      class="text-nowrap notranslate">header</code></td>
                  <td aria-colindex="2" role="cell" class="">String</td>
                  <td aria-colindex="3" role="cell" class=""></td>
                  <td aria-colindex="4" role="cell" class="">Text content to place in the header</td>
                </tr>
                <tr role="row" data-pk="header-html" class="" id="__BVID__1207__row_header-html">
                  <td aria-colindex="1" role="cell" class=""><code data-v-866a22e8="" translate="translate"
                      class="text-nowrap notranslate">header-html</code> <span data-v-866a22e8=""
                      class="badge badge-warning">Use with caution</span></td>
                  <td aria-colindex="2" role="cell" class="">String</td>
                  <td aria-colindex="3" role="cell" class=""></td>
                  <td aria-colindex="4" role="cell" class="">HTML string content to place in the header. Use with
                    caution</td>
                </tr>
                <tr role="row" data-pk="header-class" class="" id="__BVID__1207__row_header-class">
                  <td aria-colindex="1" role="cell" class=""><code data-v-866a22e8="" translate="translate"
                      class="text-nowrap notranslate">header-class</code></td>
                  <td aria-colindex="2" role="cell" class="">String or Object or Array</td>
                  <td aria-colindex="3" role="cell" class=""></td>
                  <td aria-colindex="4" role="cell" class="">CSS class (or classes) to apply to the header</td>
                </tr>
                <tr role="row" data-pk="footer-tag" class="" id="__BVID__1207__row_footer-tag">
                  <td aria-colindex="1" role="cell" class=""><code data-v-866a22e8="" translate="translate"
                      class="text-nowrap notranslate">footer-tag</code></td>
                  <td aria-colindex="2" role="cell" class="">String</td>
                  <td aria-colindex="3" role="cell" class=""><code data-v-866a22e8="" translate="translate"
                      class="word-wrap-normal notranslate">'div'</code></td>
                  <td aria-colindex="4" role="cell" class="">Specify the HTML tag to render instead of the default tag
                    for the footer</td>
                </tr>
                <tr role="row" data-pk="footer-bg-variant" class="" id="__BVID__1207__row_footer-bg-variant">
                  <td aria-colindex="1" role="cell" class=""><code data-v-866a22e8="" translate="translate"
                      class="text-nowrap notranslate">footer-bg-variant</code></td>
                  <td aria-colindex="2" role="cell" class="">String</td>
                  <td aria-colindex="3" role="cell" class=""></td>
                  <td aria-colindex="4" role="cell" class="">Applies one of the Bootstrap theme color variants to the
                    footer background</td>
                </tr>
                <tr role="row" data-pk="footer-border-variant" class="" id="__BVID__1207__row_footer-border-variant">
                  <td aria-colindex="1" role="cell" class=""><code data-v-866a22e8="" translate="translate"
                      class="text-nowrap notranslate">footer-border-variant</code></td>
                  <td aria-colindex="2" role="cell" class="">String</td>
                  <td aria-colindex="3" role="cell" class=""></td>
                  <td aria-colindex="4" role="cell" class="">Applies one of the Bootstrap theme color variants to the
                    footer border</td>
                </tr>
                <tr role="row" data-pk="footer-text-variant" class="" id="__BVID__1207__row_footer-text-variant">
                  <td aria-colindex="1" role="cell" class=""><code data-v-866a22e8="" translate="translate"
                      class="text-nowrap notranslate">footer-text-variant</code></td>
                  <td aria-colindex="2" role="cell" class="">String</td>
                  <td aria-colindex="3" role="cell" class=""></td>
                  <td aria-colindex="4" role="cell" class="">Applies one of the Bootstrap theme color variants to the
                    footer text</td>
                </tr>
                <tr role="row" data-pk="footer" class="" id="__BVID__1207__row_footer">
                  <td aria-colindex="1" role="cell" class=""><code data-v-866a22e8="" translate="translate"
                      class="text-nowrap notranslate">footer</code></td>
                  <td aria-colindex="2" role="cell" class="">String</td>
                  <td aria-colindex="3" role="cell" class=""></td>
                  <td aria-colindex="4" role="cell" class="">Text content to place in the footer</td>
                </tr>
                <tr role="row" data-pk="footer-html" class="" id="__BVID__1207__row_footer-html">
                  <td aria-colindex="1" role="cell" class=""><code data-v-866a22e8="" translate="translate"
                      class="text-nowrap notranslate">footer-html</code> <span data-v-866a22e8=""
                      class="badge badge-warning">Use with caution</span></td>
                  <td aria-colindex="2" role="cell" class="">String</td>
                  <td aria-colindex="3" role="cell" class=""></td>
                  <td aria-colindex="4" role="cell" class="">HTML string content to place in the footer. Use with
                    caution</td>
                </tr>
                <tr role="row" data-pk="footer-class" class="" id="__BVID__1207__row_footer-class">
                  <td aria-colindex="1" role="cell" class=""><code data-v-866a22e8="" translate="translate"
                      class="text-nowrap notranslate">footer-class</code></td>
                  <td aria-colindex="2" role="cell" class="">String or Object or Array</td>
                  <td aria-colindex="3" role="cell" class=""></td>
                  <td aria-colindex="4" role="cell" class="">CSS class (or classes) to apply to the footer</td>
                </tr>
                <tr role="row" data-pk="img-src" class="" id="__BVID__1207__row_img-src">
                  <td aria-colindex="1" role="cell" class=""><code data-v-866a22e8="" translate="translate"
                      class="text-nowrap notranslate">img-src</code></td>
                  <td aria-colindex="2" role="cell" class="">String</td>
                  <td aria-colindex="3" role="cell" class=""></td>
                  <td aria-colindex="4" role="cell" class="">URL for the optional image</td>
                </tr>
                <tr role="row" data-pk="img-alt" class="" id="__BVID__1207__row_img-alt">
                  <td aria-colindex="1" role="cell" class=""><code data-v-866a22e8="" translate="translate"
                      class="text-nowrap notranslate">img-alt</code></td>
                  <td aria-colindex="2" role="cell" class="">String</td>
                  <td aria-colindex="3" role="cell" class=""></td>
                  <td aria-colindex="4" role="cell" class="">Value to set the image attribute 'alt'</td>
                </tr>
                <tr role="row" data-pk="img-top" class="" id="__BVID__1207__row_img-top">
                  <td aria-colindex="1" role="cell" class=""><code data-v-866a22e8="" translate="translate"
                      class="text-nowrap notranslate">img-top</code></td>
                  <td aria-colindex="2" role="cell" class="">Boolean</td>
                  <td aria-colindex="3" role="cell" class=""><code data-v-866a22e8="" translate="translate"
                      class="word-wrap-normal notranslate">false</code></td>
                  <td aria-colindex="4" role="cell" class="">Set if the image should appear at the top of the card</td>
                </tr>
                <tr role="row" data-pk="img-bottom" class="" id="__BVID__1207__row_img-bottom">
                  <td aria-colindex="1" role="cell" class=""><code data-v-866a22e8="" translate="translate"
                      class="text-nowrap notranslate">img-bottom</code></td>
                  <td aria-colindex="2" role="cell" class="">Boolean</td>
                  <td aria-colindex="3" role="cell" class=""><code data-v-866a22e8="" translate="translate"
                      class="word-wrap-normal notranslate">false</code></td>
                  <td aria-colindex="4" role="cell" class="">Set if the image should appear at the bottom of the card
                  </td>
                </tr>
                <tr role="row" data-pk="img-start" class="" id="__BVID__1207__row_img-start">
                  <td aria-colindex="1" role="cell" class=""><code data-v-866a22e8="" translate="translate"
                      class="text-nowrap notranslate">img-start</code></td>
                  <td aria-colindex="2" role="cell" class="">Boolean</td>
                  <td aria-colindex="3" role="cell" class=""><code data-v-866a22e8="" translate="translate"
                      class="word-wrap-normal notranslate">false</code></td>
                  <td aria-colindex="4" role="cell" class="">Set if the image should appear at the start (left) of the
                    card</td>
                </tr>
                <tr role="row" data-pk="img-left" class="" id="__BVID__1207__row_img-left">
                  <td aria-colindex="1" role="cell" class=""><code data-v-866a22e8="" translate="translate"
                      class="text-nowrap notranslate">img-left</code></td>
                  <td aria-colindex="2" role="cell" class="">Boolean</td>
                  <td aria-colindex="3" role="cell" class=""><code data-v-866a22e8="" translate="translate"
                      class="word-wrap-normal notranslate">false</code></td>
                  <td aria-colindex="4" role="cell" class="">Set if the image should appear at the start (left) of the
                    card. Synonym for the 'left' prop</td>
                </tr>
                <tr role="row" data-pk="img-end" class="" id="__BVID__1207__row_img-end">
                  <td aria-colindex="1" role="cell" class=""><code data-v-866a22e8="" translate="translate"
                      class="text-nowrap notranslate">img-end</code></td>
                  <td aria-colindex="2" role="cell" class="">Boolean</td>
                  <td aria-colindex="3" role="cell" class=""><code data-v-866a22e8="" translate="translate"
                      class="word-wrap-normal notranslate">false</code></td>
                  <td aria-colindex="4" role="cell" class="">Set if the image should appear at the end (right) of the
                    card</td>
                </tr>
                <tr role="row" data-pk="img-right" class="" id="__BVID__1207__row_img-right">
                  <td aria-colindex="1" role="cell" class=""><code data-v-866a22e8="" translate="translate"
                      class="text-nowrap notranslate">img-right</code></td>
                  <td aria-colindex="2" role="cell" class="">Boolean</td>
                  <td aria-colindex="3" role="cell" class=""><code data-v-866a22e8="" translate="translate"
                      class="word-wrap-normal notranslate">false</code></td>
                  <td aria-colindex="4" role="cell" class="">Set if the image should appear at the end (right) of the
                    card. Synonym for the 'right' prop</td>
                </tr>
                <tr role="row" data-pk="img-height" class="" id="__BVID__1207__row_img-height">
                  <td aria-colindex="1" role="cell" class=""><code data-v-866a22e8="" translate="translate"
                      class="text-nowrap notranslate">img-height</code></td>
                  <td aria-colindex="2" role="cell" class="">Number or String</td>
                  <td aria-colindex="3" role="cell" class=""></td>
                  <td aria-colindex="4" role="cell" class="">The value to set on the image's 'height' attribute</td>
                </tr>
                <tr role="row" data-pk="img-width" class="" id="__BVID__1207__row_img-width">
                  <td aria-colindex="1" role="cell" class=""><code data-v-866a22e8="" translate="translate"
                      class="text-nowrap notranslate">img-width</code></td>
                  <td aria-colindex="2" role="cell" class="">Number or String</td>
                  <td aria-colindex="3" role="cell" class=""></td>
                  <td aria-colindex="4" role="cell" class="">The value to set on the image's 'width' attribute</td>
                </tr>
                <tr role="row" data-pk="tag" class="" id="__BVID__1207__row_tag">
                  <td aria-colindex="1" role="cell" class=""><code data-v-866a22e8="" translate="translate"
                      class="text-nowrap notranslate">tag</code></td>
                  <td aria-colindex="2" role="cell" class="">String</td>
                  <td aria-colindex="3" role="cell" class=""><code data-v-866a22e8="" translate="translate"
                      class="word-wrap-normal notranslate">'div'</code></td>
                  <td aria-colindex="4" role="cell" class="">Specify the HTML tag to render instead of the default tag
                  </td>
                </tr>
                <tr role="row" data-pk="bg-variant" class="" id="__BVID__1207__row_bg-variant">
                  <td aria-colindex="1" role="cell" class=""><code data-v-866a22e8="" translate="translate"
                      class="text-nowrap notranslate">bg-variant</code></td>
                  <td aria-colindex="2" role="cell" class="">String</td>
                  <td aria-colindex="3" role="cell" class=""></td>
                  <td aria-colindex="4" role="cell" class="">Applies one of the Bootstrap theme color variants to the
                    background</td>
                </tr>
                <tr role="row" data-pk="border-variant" class="" id="__BVID__1207__row_border-variant">
                  <td aria-colindex="1" role="cell" class=""><code data-v-866a22e8="" translate="translate"
                      class="text-nowrap notranslate">border-variant</code></td>
                  <td aria-colindex="2" role="cell" class="">String</td>
                  <td aria-colindex="3" role="cell" class=""></td>
                  <td aria-colindex="4" role="cell" class="">Applies one of the Bootstrap theme color variants to the
                    border</td>
                </tr>
                <tr role="row" data-pk="text-variant" class="" id="__BVID__1207__row_text-variant">
                  <td aria-colindex="1" role="cell" class=""><code data-v-866a22e8="" translate="translate"
                      class="text-nowrap notranslate">text-variant</code></td>
                  <td aria-colindex="2" role="cell" class="">String</td>
                  <td aria-colindex="3" role="cell" class=""></td>
                  <td aria-colindex="4" role="cell" class="">Applies one of the Bootstrap theme color variants to the
                    text</td>
                </tr>
                <tr role="row" data-pk="align" class="" id="__BVID__1207__row_align">
                  <td aria-colindex="1" role="cell" class=""><code data-v-866a22e8="" translate="translate"
                      class="text-nowrap notranslate">align</code></td>
                  <td aria-colindex="2" role="cell" class="">String</td>
                  <td aria-colindex="3" role="cell" class=""></td>
                  <td aria-colindex="4" role="cell" class="">Text alignment for the card's content: 'left', 'center' or
                    'right'</td>
                </tr>
                <tr role="row" data-pk="no-body" class="" id="__BVID__1207__row_no-body">
                  <td aria-colindex="1" role="cell" class=""><code data-v-866a22e8="" translate="translate"
                      class="text-nowrap notranslate">no-body</code></td>
                  <td aria-colindex="2" role="cell" class="">Boolean</td>
                  <td aria-colindex="3" role="cell" class=""><code data-v-866a22e8="" translate="translate"
                      class="word-wrap-normal notranslate">false</code></td>
                  <td aria-colindex="4" role="cell" class="">Disable rendering of the default inner card-body element
                  </td>
                </tr>
              </tbody>
            </table>
          </div>
          <div data-v-866a22e8="" class="alert alert-warning">
            <p data-v-866a22e8="" class="mb-0 small"><strong data-v-866a22e8="">Caution:</strong> Props that support
              HTML strings
              (<code data-v-866a22e8="" translate="translate" class="notranslate">*-html</code>) can be vulnerable to <a
                data-v-866a22e8="" rel="noopener" target="_blank"
                href="https://en.wikipedia.org/wiki/Cross-site_scripting" class="alert-link"> Cross Site Scripting (XSS)
                attacks </a> when passed raw user supplied values. You must properly <a data-v-866a22e8=""
                rel="noopener" target="_blank" href="https://en.wikipedia.org/wiki/HTML_sanitization"
                class="alert-link"> sanitize </a> the user input first! </p>
          </div>
        </article>
        <article data-v-866a22e8="" class="bd-content">
          <h4 data-v-866a22e8="" id="comp-ref-b-card-slots" tabindex="-1" class="bv-no-focus-ring mb-3"><span
              data-v-866a22e8="" class="bd-content-title"> Slots <a data-v-866a22e8=""
                href="../../../bootstrap-vue/docs/components/card#comp-ref-b-card-slots" class="anchorjs-link"
                aria-labelledby="comp-ref-b-card-slots" target="_self"></a></span></h4>
          <div data-v-866a22e8="" class="table-responsive-sm">
            <table role="table" aria-busy="false" aria-colcount="2" class="table b-table bv-docs-table table-striped"
              id="__BVID__1260">
              <thead role="rowgroup" class="">
                <tr role="row" class="">
                  <th role="columnheader" scope="col" aria-colindex="1" class="">Slot Name</th>
                  <th role="columnheader" scope="col" aria-colindex="2" class="">Description</th>
                </tr>
              </thead>
              <tbody role="rowgroup">
                <tr role="row" data-pk="header" class="" id="__BVID__1260__row_header">
                  <td aria-colindex="1" role="cell" class=""><code data-v-866a22e8="" translate="translate"
                      class="text-nowrap notranslate">header</code></td>
                  <td aria-colindex="2" role="cell" class="">For custom rendering of header content</td>
                </tr>
                <tr role="row" data-pk="footer" class="" id="__BVID__1260__row_footer">
                  <td aria-colindex="1" role="cell" class=""><code data-v-866a22e8="" translate="translate"
                      class="text-nowrap notranslate">footer</code></td>
                  <td aria-colindex="2" role="cell" class="">For custom rendering of footer content</td>
                </tr>
              </tbody>
            </table>
          </div>
        </article>
        <header data-v-866a22e8="" class="row align-items-center">
          <div data-v-866a22e8="" class="col-sm-9">
            <h3 data-v-866a22e8="" id="comp-ref-b-card-header" tabindex="-1" class="bv-no-focus-ring"><span
                data-v-866a22e8="" class="bd-content-title"><code data-v-866a22e8="" translate="translate"
                  class="notranslate bigger">&lt;b-card-header&gt;</code><a data-v-866a22e8=""
                  href="../../../bootstrap-vue/docs/components/card#comp-ref-b-card-header" class="anchorjs-link"
                  aria-labelledby="comp-ref-b-card-header" target="_self"></a></span></h3>
            <a data-v-866a22e8="" rel="noopener" target="_blank"
              href="https://vuejs.org/v2/guide/render-function.html#Functional-Components"
              class="badge badge-secondary"> Functional Component </a>
          </div>
          <div data-v-866a22e8="" class="text-sm-right col-sm-3"><a data-v-866a22e8="" rel="noopener" target="_blank"
              href="https://github.com/bootstrap-vue/bootstrap-vue/tree/dev/src/components/card/card-header.js"
              class="btn btn-outline-secondary btn-sm"> View source </a></div>
        </header>
        <ul data-v-866a22e8="" class="component-ref-mini-toc my-3">
          <li data-v-866a22e8=""><a data-v-866a22e8="" href="#comp-ref-b-card-header-props"><code data-v-866a22e8=""
                translate="translate" class="notranslate">&lt;b-card-header&gt;</code> Properties </a></li>
        </ul>
        <article data-v-866a22e8="" class="bd-content">
          <h4 data-v-866a22e8="" id="comp-ref-b-card-header-props" tabindex="-1" class="bv-no-focus-ring mb-3"><span
              data-v-866a22e8="" class="bd-content-title"> Properties <a data-v-866a22e8=""
                href="../../../bootstrap-vue/docs/components/card#comp-ref-b-card-header-props" class="anchorjs-link"
                aria-labelledby="comp-ref-b-card-header-props" target="_self"></a></span></h4>
          <div data-v-866a22e8="" class="table-responsive-sm">
            <table role="table" aria-busy="false" aria-colcount="4" class="table b-table bv-docs-table table-striped"
              id="__BVID__1275">
              <thead role="rowgroup" class="">
                <tr role="row" class="">
                  <th role="columnheader" scope="col" aria-colindex="1" class="">Property</th>
                  <th role="columnheader" scope="col" aria-colindex="2" class="">Type</th>
                  <th role="columnheader" scope="col" aria-colindex="3" class="">Default</th>
                  <th role="columnheader" scope="col" aria-colindex="4" class="">Description</th>
                </tr>
              </thead>
              <tbody role="rowgroup">
                <tr role="row" data-pk="header-tag" class="" id="__BVID__1275__row_header-tag">
                  <td aria-colindex="1" role="cell" class=""><code data-v-866a22e8="" translate="translate"
                      class="text-nowrap notranslate">header-tag</code></td>
                  <td aria-colindex="2" role="cell" class="">String</td>
                  <td aria-colindex="3" role="cell" class=""><code data-v-866a22e8="" translate="translate"
                      class="word-wrap-normal notranslate">'div'</code></td>
                  <td aria-colindex="4" role="cell" class="">Specify the HTML tag to render instead of the default tag
                    for the header</td>
                </tr>
                <tr role="row" data-pk="header-bg-variant" class="" id="__BVID__1275__row_header-bg-variant">
                  <td aria-colindex="1" role="cell" class=""><code data-v-866a22e8="" translate="translate"
                      class="text-nowrap notranslate">header-bg-variant</code></td>
                  <td aria-colindex="2" role="cell" class="">String</td>
                  <td aria-colindex="3" role="cell" class=""></td>
                  <td aria-colindex="4" role="cell" class="">Applies one of the Bootstrap theme color variants to the
                    header background</td>
                </tr>
                <tr role="row" data-pk="header-border-variant" class="" id="__BVID__1275__row_header-border-variant">
                  <td aria-colindex="1" role="cell" class=""><code data-v-866a22e8="" translate="translate"
                      class="text-nowrap notranslate">header-border-variant</code></td>
                  <td aria-colindex="2" role="cell" class="">String</td>
                  <td aria-colindex="3" role="cell" class=""></td>
                  <td aria-colindex="4" role="cell" class="">Applies one of the Bootstrap theme color variants to the
                    header border</td>
                </tr>
                <tr role="row" data-pk="header-text-variant" class="" id="__BVID__1275__row_header-text-variant">
                  <td aria-colindex="1" role="cell" class=""><code data-v-866a22e8="" translate="translate"
                      class="text-nowrap notranslate">header-text-variant</code></td>
                  <td aria-colindex="2" role="cell" class="">String</td>
                  <td aria-colindex="3" role="cell" class=""></td>
                  <td aria-colindex="4" role="cell" class="">Applies one of the Bootstrap theme color variants to the
                    header text</td>
                </tr>
                <tr role="row" data-pk="header" class="" id="__BVID__1275__row_header">
                  <td aria-colindex="1" role="cell" class=""><code data-v-866a22e8="" translate="translate"
                      class="text-nowrap notranslate">header</code></td>
                  <td aria-colindex="2" role="cell" class="">String</td>
                  <td aria-colindex="3" role="cell" class=""></td>
                  <td aria-colindex="4" role="cell" class="">Text content to place in the header</td>
                </tr>
                <tr role="row" data-pk="header-html" class="" id="__BVID__1275__row_header-html">
                  <td aria-colindex="1" role="cell" class=""><code data-v-866a22e8="" translate="translate"
                      class="text-nowrap notranslate">header-html</code> <span data-v-866a22e8=""
                      class="badge badge-warning">Use with caution</span></td>
                  <td aria-colindex="2" role="cell" class="">String</td>
                  <td aria-colindex="3" role="cell" class=""></td>
                  <td aria-colindex="4" role="cell" class="">HTML string content to place in the header. Use with
                    caution</td>
                </tr>
                <tr role="row" data-pk="header-class" class="" id="__BVID__1275__row_header-class">
                  <td aria-colindex="1" role="cell" class=""><code data-v-866a22e8="" translate="translate"
                      class="text-nowrap notranslate">header-class</code></td>
                  <td aria-colindex="2" role="cell" class="">String or Object or Array</td>
                  <td aria-colindex="3" role="cell" class=""></td>
                  <td aria-colindex="4" role="cell" class="">CSS class (or classes) to apply to the header</td>
                </tr>
              </tbody>
            </table>
          </div>
          <div data-v-866a22e8="" class="alert alert-warning">
            <p data-v-866a22e8="" class="mb-0 small"><strong data-v-866a22e8="">Caution:</strong> Props that support
              HTML strings
              (<code data-v-866a22e8="" translate="translate" class="notranslate">*-html</code>) can be vulnerable to <a
                data-v-866a22e8="" rel="noopener" target="_blank"
                href="https://en.wikipedia.org/wiki/Cross-site_scripting" class="alert-link"> Cross Site Scripting (XSS)
                attacks </a> when passed raw user supplied values. You must properly <a data-v-866a22e8=""
                rel="noopener" target="_blank" href="https://en.wikipedia.org/wiki/HTML_sanitization"
                class="alert-link"> sanitize </a> the user input first! </p>
          </div>
        </article>
        <header data-v-866a22e8="" class="row align-items-center">
          <div data-v-866a22e8="" class="col-sm-9">
            <h3 data-v-866a22e8="" id="comp-ref-b-card-footer" tabindex="-1" class="bv-no-focus-ring"><span
                data-v-866a22e8="" class="bd-content-title"><code data-v-866a22e8="" translate="translate"
                  class="notranslate bigger">&lt;b-card-footer&gt;</code><a data-v-866a22e8=""
                  href="../../../bootstrap-vue/docs/components/card#comp-ref-b-card-footer" class="anchorjs-link"
                  aria-labelledby="comp-ref-b-card-footer" target="_self"></a></span></h3>
            <a data-v-866a22e8="" rel="noopener" target="_blank"
              href="https://vuejs.org/v2/guide/render-function.html#Functional-Components"
              class="badge badge-secondary"> Functional Component </a>
          </div>
          <div data-v-866a22e8="" class="text-sm-right col-sm-3"><a data-v-866a22e8="" rel="noopener" target="_blank"
              href="https://github.com/bootstrap-vue/bootstrap-vue/tree/dev/src/components/card/card-footer.js"
              class="btn btn-outline-secondary btn-sm"> View source </a></div>
        </header>
        <ul data-v-866a22e8="" class="component-ref-mini-toc my-3">
          <li data-v-866a22e8=""><a data-v-866a22e8="" href="#comp-ref-b-card-footer-props"><code data-v-866a22e8=""
                translate="translate" class="notranslate">&lt;b-card-footer&gt;</code> Properties </a></li>
        </ul>
        <article data-v-866a22e8="" class="bd-content">
          <h4 data-v-866a22e8="" id="comp-ref-b-card-footer-props" tabindex="-1" class="bv-no-focus-ring mb-3"><span
              data-v-866a22e8="" class="bd-content-title"> Properties <a data-v-866a22e8=""
                href="../../../bootstrap-vue/docs/components/card#comp-ref-b-card-footer-props" class="anchorjs-link"
                aria-labelledby="comp-ref-b-card-footer-props" target="_self"></a></span></h4>
          <div data-v-866a22e8="" class="table-responsive-sm">
            <table role="table" aria-busy="false" aria-colcount="4" class="table b-table bv-docs-table table-striped"
              id="__BVID__1299">
              <thead role="rowgroup" class="">
                <tr role="row" class="">
                  <th role="columnheader" scope="col" aria-colindex="1" class="">Property</th>
                  <th role="columnheader" scope="col" aria-colindex="2" class="">Type</th>
                  <th role="columnheader" scope="col" aria-colindex="3" class="">Default</th>
                  <th role="columnheader" scope="col" aria-colindex="4" class="">Description</th>
                </tr>
              </thead>
              <tbody role="rowgroup">
                <tr role="row" data-pk="footer-tag" class="" id="__BVID__1299__row_footer-tag">
                  <td aria-colindex="1" role="cell" class=""><code data-v-866a22e8="" translate="translate"
                      class="text-nowrap notranslate">footer-tag</code></td>
                  <td aria-colindex="2" role="cell" class="">String</td>
                  <td aria-colindex="3" role="cell" class=""><code data-v-866a22e8="" translate="translate"
                      class="word-wrap-normal notranslate">'div'</code></td>
                  <td aria-colindex="4" role="cell" class="">Specify the HTML tag to render instead of the default tag
                    for the footer</td>
                </tr>
                <tr role="row" data-pk="footer-bg-variant" class="" id="__BVID__1299__row_footer-bg-variant">
                  <td aria-colindex="1" role="cell" class=""><code data-v-866a22e8="" translate="translate"
                      class="text-nowrap notranslate">footer-bg-variant</code></td>
                  <td aria-colindex="2" role="cell" class="">String</td>
                  <td aria-colindex="3" role="cell" class=""></td>
                  <td aria-colindex="4" role="cell" class="">Applies one of the Bootstrap theme color variants to the
                    footer background</td>
                </tr>
                <tr role="row" data-pk="footer-border-variant" class="" id="__BVID__1299__row_footer-border-variant">
                  <td aria-colindex="1" role="cell" class=""><code data-v-866a22e8="" translate="translate"
                      class="text-nowrap notranslate">footer-border-variant</code></td>
                  <td aria-colindex="2" role="cell" class="">String</td>
                  <td aria-colindex="3" role="cell" class=""></td>
                  <td aria-colindex="4" role="cell" class="">Applies one of the Bootstrap theme color variants to the
                    footer border</td>
                </tr>
                <tr role="row" data-pk="footer-text-variant" class="" id="__BVID__1299__row_footer-text-variant">
                  <td aria-colindex="1" role="cell" class=""><code data-v-866a22e8="" translate="translate"
                      class="text-nowrap notranslate">footer-text-variant</code></td>
                  <td aria-colindex="2" role="cell" class="">String</td>
                  <td aria-colindex="3" role="cell" class=""></td>
                  <td aria-colindex="4" role="cell" class="">Applies one of the Bootstrap theme color variants to the
                    footer text</td>
                </tr>
                <tr role="row" data-pk="footer" class="" id="__BVID__1299__row_footer">
                  <td aria-colindex="1" role="cell" class=""><code data-v-866a22e8="" translate="translate"
                      class="text-nowrap notranslate">footer</code></td>
                  <td aria-colindex="2" role="cell" class="">String</td>
                  <td aria-colindex="3" role="cell" class=""></td>
                  <td aria-colindex="4" role="cell" class="">Text content to place in the footer</td>
                </tr>
                <tr role="row" data-pk="footer-html" class="" id="__BVID__1299__row_footer-html">
                  <td aria-colindex="1" role="cell" class=""><code data-v-866a22e8="" translate="translate"
                      class="text-nowrap notranslate">footer-html</code> <span data-v-866a22e8=""
                      class="badge badge-warning">Use with caution</span></td>
                  <td aria-colindex="2" role="cell" class="">String</td>
                  <td aria-colindex="3" role="cell" class=""></td>
                  <td aria-colindex="4" role="cell" class="">HTML string content to place in the footer. Use with
                    caution</td>
                </tr>
                <tr role="row" data-pk="footer-class" class="" id="__BVID__1299__row_footer-class">
                  <td aria-colindex="1" role="cell" class=""><code data-v-866a22e8="" translate="translate"
                      class="text-nowrap notranslate">footer-class</code></td>
                  <td aria-colindex="2" role="cell" class="">String or Object or Array</td>
                  <td aria-colindex="3" role="cell" class=""></td>
                  <td aria-colindex="4" role="cell" class="">CSS class (or classes) to apply to the footer</td>
                </tr>
              </tbody>
            </table>
          </div>
          <div data-v-866a22e8="" class="alert alert-warning">
            <p data-v-866a22e8="" class="mb-0 small"><strong data-v-866a22e8="">Caution:</strong> Props that support
              HTML strings
              (<code data-v-866a22e8="" translate="translate" class="notranslate">*-html</code>) can be vulnerable to <a
                data-v-866a22e8="" rel="noopener" target="_blank"
                href="https://en.wikipedia.org/wiki/Cross-site_scripting" class="alert-link"> Cross Site Scripting (XSS)
                attacks </a> when passed raw user supplied values. You must properly <a data-v-866a22e8=""
                rel="noopener" target="_blank" href="https://en.wikipedia.org/wiki/HTML_sanitization"
                class="alert-link"> sanitize </a> the user input first! </p>
          </div>
        </article>
        <header data-v-866a22e8="" class="row align-items-center">
          <div data-v-866a22e8="" class="col-sm-9">
            <h3 data-v-866a22e8="" id="comp-ref-b-card-body" tabindex="-1" class="bv-no-focus-ring"><span
                data-v-866a22e8="" class="bd-content-title"><code data-v-866a22e8="" translate="translate"
                  class="notranslate bigger">&lt;b-card-body&gt;</code><a data-v-866a22e8=""
                  href="../../../bootstrap-vue/docs/components/card#comp-ref-b-card-body" class="anchorjs-link"
                  aria-labelledby="comp-ref-b-card-body" target="_self"></a></span></h3>
            <a data-v-866a22e8="" rel="noopener" target="_blank"
              href="https://vuejs.org/v2/guide/render-function.html#Functional-Components"
              class="badge badge-secondary"> Functional Component </a>
          </div>
          <div data-v-866a22e8="" class="text-sm-right col-sm-3"><a data-v-866a22e8="" rel="noopener" target="_blank"
              href="https://github.com/bootstrap-vue/bootstrap-vue/tree/dev/src/components/card/card-body.js"
              class="btn btn-outline-secondary btn-sm"> View source </a></div>
        </header>
        <ul data-v-866a22e8="" class="component-ref-mini-toc my-3">
          <li data-v-866a22e8=""><a data-v-866a22e8="" href="#comp-ref-b-card-body-props"><code data-v-866a22e8=""
                translate="translate" class="notranslate">&lt;b-card-body&gt;</code> Properties </a></li>
        </ul>
        <article data-v-866a22e8="" class="bd-content">
          <h4 data-v-866a22e8="" id="comp-ref-b-card-body-props" tabindex="-1" class="bv-no-focus-ring mb-3"><span
              data-v-866a22e8="" class="bd-content-title"> Properties <a data-v-866a22e8=""
                href="../../../bootstrap-vue/docs/components/card#comp-ref-b-card-body-props" class="anchorjs-link"
                aria-labelledby="comp-ref-b-card-body-props" target="_self"></a></span></h4>
          <div data-v-866a22e8="" class="table-responsive-sm">
            <table role="table" aria-busy="false" aria-colcount="4" class="table b-table bv-docs-table table-striped"
              id="__BVID__1323">
              <thead role="rowgroup" class="">
                <tr role="row" class="">
                  <th role="columnheader" scope="col" tabindex="0" aria-colindex="1" aria-sort="none"
                    class="b-table-sort-icon-left">Property<span class="sr-only"> (Click to sort Ascending)</span></th>
                  <th role="columnheader" scope="col" tabindex="0" aria-colindex="2" class="">Type</th>
                  <th role="columnheader" scope="col" tabindex="0" aria-colindex="3" class="">Default</th>
                  <th role="columnheader" scope="col" tabindex="0" aria-colindex="4" class="">Description</th>
                </tr>
              </thead>
              <tbody role="rowgroup">
                <tr role="row" data-pk="body-tag" class="" id="__BVID__1323__row_body-tag">
                  <td aria-colindex="1" role="cell" class=""><code data-v-866a22e8="" translate="translate"
                      class="text-nowrap notranslate">body-tag</code></td>
                  <td aria-colindex="2" role="cell" class="">String</td>
                  <td aria-colindex="3" role="cell" class=""><code data-v-866a22e8="" translate="translate"
                      class="word-wrap-normal notranslate">'div'</code></td>
                  <td aria-colindex="4" role="cell" class="">Specify the HTML tag to render instead of the default tag
                    for the body</td>
                </tr>
                <tr role="row" data-pk="body-bg-variant" class="" id="__BVID__1323__row_body-bg-variant">
                  <td aria-colindex="1" role="cell" class=""><code data-v-866a22e8="" translate="translate"
                      class="text-nowrap notranslate">body-bg-variant</code></td>
                  <td aria-colindex="2" role="cell" class="">String</td>
                  <td aria-colindex="3" role="cell" class=""></td>
                  <td aria-colindex="4" role="cell" class="">Applies one of the Bootstrap theme color variants to the
                    body background</td>
                </tr>
                <tr role="row" data-pk="body-border-variant" class="" id="__BVID__1323__row_body-border-variant">
                  <td aria-colindex="1" role="cell" class=""><code data-v-866a22e8="" translate="translate"
                      class="text-nowrap notranslate">body-border-variant</code></td>
                  <td aria-colindex="2" role="cell" class="">String</td>
                  <td aria-colindex="3" role="cell" class=""></td>
                  <td aria-colindex="4" role="cell" class="">Applies one of the Bootstrap theme color variants to the
                    body border</td>
                </tr>
                <tr role="row" data-pk="body-text-variant" class="" id="__BVID__1323__row_body-text-variant">
                  <td aria-colindex="1" role="cell" class=""><code data-v-866a22e8="" translate="translate"
                      class="text-nowrap notranslate">body-text-variant</code></td>
                  <td aria-colindex="2" role="cell" class="">String</td>
                  <td aria-colindex="3" role="cell" class=""></td>
                  <td aria-colindex="4" role="cell" class="">Applies one of the Bootstrap theme color variants to the
                    body text</td>
                </tr>
                <tr role="row" data-pk="body-class" class="" id="__BVID__1323__row_body-class">
                  <td aria-colindex="1" role="cell" class=""><code data-v-866a22e8="" translate="translate"
                      class="text-nowrap notranslate">body-class</code></td>
                  <td aria-colindex="2" role="cell" class="">String or Object or Array</td>
                  <td aria-colindex="3" role="cell" class=""></td>
                  <td aria-colindex="4" role="cell" class="">CSS class (or classes) to apply to the body</td>
                </tr>
                <tr role="row" data-pk="title" class="" id="__BVID__1323__row_title">
                  <td aria-colindex="1" role="cell" class=""><code data-v-866a22e8="" translate="translate"
                      class="text-nowrap notranslate">title</code></td>
                  <td aria-colindex="2" role="cell" class="">String</td>
                  <td aria-colindex="3" role="cell" class=""></td>
                  <td aria-colindex="4" role="cell" class="">Text content to place in the title</td>
                </tr>
                <tr role="row" data-pk="title-tag" class="" id="__BVID__1323__row_title-tag">
                  <td aria-colindex="1" role="cell" class=""><code data-v-866a22e8="" translate="translate"
                      class="text-nowrap notranslate">title-tag</code></td>
                  <td aria-colindex="2" role="cell" class="">String</td>
                  <td aria-colindex="3" role="cell" class=""><code data-v-866a22e8="" translate="translate"
                      class="word-wrap-normal notranslate">'h4'</code></td>
                  <td aria-colindex="4" role="cell" class="">Specify the HTML tag to render instead of the default tag
                    for the title</td>
                </tr>
                <tr role="row" data-pk="sub-title" class="" id="__BVID__1323__row_sub-title">
                  <td aria-colindex="1" role="cell" class=""><code data-v-866a22e8="" translate="translate"
                      class="text-nowrap notranslate">sub-title</code></td>
                  <td aria-colindex="2" role="cell" class="">String</td>
                  <td aria-colindex="3" role="cell" class=""></td>
                  <td aria-colindex="4" role="cell" class="">Text content to place in the sub title</td>
                </tr>
                <tr role="row" data-pk="sub-title-tag" class="" id="__BVID__1323__row_sub-title-tag">
                  <td aria-colindex="1" role="cell" class=""><code data-v-866a22e8="" translate="translate"
                      class="text-nowrap notranslate">sub-title-tag</code></td>
                  <td aria-colindex="2" role="cell" class="">String</td>
                  <td aria-colindex="3" role="cell" class=""><code data-v-866a22e8="" translate="translate"
                      class="word-wrap-normal notranslate">'h6'</code></td>
                  <td aria-colindex="4" role="cell" class="">Specify the HTML tag to render instead of the default tag
                    for the sub title</td>
                </tr>
                <tr role="row" data-pk="sub-title-text-variant" class="" id="__BVID__1323__row_sub-title-text-variant">
                  <td aria-colindex="1" role="cell" class=""><code data-v-866a22e8="" translate="translate"
                      class="text-nowrap notranslate">sub-title-text-variant</code></td>
                  <td aria-colindex="2" role="cell" class="">String</td>
                  <td aria-colindex="3" role="cell" class=""><code data-v-866a22e8="" translate="translate"
                      class="word-wrap-normal notranslate">'muted'</code></td>
                  <td aria-colindex="4" role="cell" class="">Applies one of the Bootstrap theme color variants to the
                    sub title text</td>
                </tr>
                <tr role="row" data-pk="overlay" class="" id="__BVID__1323__row_overlay">
                  <td aria-colindex="1" role="cell" class=""><code data-v-866a22e8="" translate="translate"
                      class="text-nowrap notranslate">overlay</code></td>
                  <td aria-colindex="2" role="cell" class="">Boolean</td>
                  <td aria-colindex="3" role="cell" class=""><code data-v-866a22e8="" translate="translate"
                      class="word-wrap-normal notranslate">false</code></td>
                  <td aria-colindex="4" role="cell" class="">When set, will overlay the card body on top of the image
                    (if the card has an image)</td>
                </tr>
              </tbody>
            </table>
          </div>
        </article>
        <header data-v-866a22e8="" class="row align-items-center">
          <div data-v-866a22e8="" class="col-sm-9">
            <h3 data-v-866a22e8="" id="comp-ref-b-card-title" tabindex="-1" class="bv-no-focus-ring"><span
                data-v-866a22e8="" class="bd-content-title"><code data-v-866a22e8="" translate="translate"
                  class="notranslate bigger">&lt;b-card-title&gt;</code><a data-v-866a22e8=""
                  href="../../../bootstrap-vue/docs/components/card#comp-ref-b-card-title" class="anchorjs-link"
                  aria-labelledby="comp-ref-b-card-title" target="_self"></a></span></h3>
            <a data-v-866a22e8="" rel="noopener" target="_blank"
              href="https://vuejs.org/v2/guide/render-function.html#Functional-Components"
              class="badge badge-secondary"> Functional Component </a>
          </div>
          <div data-v-866a22e8="" class="text-sm-right col-sm-3"><a data-v-866a22e8="" rel="noopener" target="_blank"
              href="https://github.com/bootstrap-vue/bootstrap-vue/tree/dev/src/components/card/card-title.js"
              class="btn btn-outline-secondary btn-sm"> View source </a></div>
        </header>
        <ul data-v-866a22e8="" class="component-ref-mini-toc my-3">
          <li data-v-866a22e8=""><a data-v-866a22e8="" href="#comp-ref-b-card-title-props"><code data-v-866a22e8=""
                translate="translate" class="notranslate">&lt;b-card-title&gt;</code> Properties </a></li>
        </ul>
        <article data-v-866a22e8="" class="bd-content">
          <h4 data-v-866a22e8="" id="comp-ref-b-card-title-props" tabindex="-1" class="bv-no-focus-ring mb-3"><span
              data-v-866a22e8="" class="bd-content-title"> Properties <a data-v-866a22e8=""
                href="../../../bootstrap-vue/docs/components/card#comp-ref-b-card-title-props" class="anchorjs-link"
                aria-labelledby="comp-ref-b-card-title-props" target="_self"></a></span></h4>
          <div data-v-866a22e8="" class="table-responsive-sm">
            <table role="table" aria-busy="false" aria-colcount="4" class="table b-table bv-docs-table table-striped"
              id="__BVID__1349">
              <thead role="rowgroup" class="">
                <tr role="row" class="">
                  <th role="columnheader" scope="col" aria-colindex="1" class="">Property</th>
                  <th role="columnheader" scope="col" aria-colindex="2" class="">Type</th>
                  <th role="columnheader" scope="col" aria-colindex="3" class="">Default</th>
                  <th role="columnheader" scope="col" aria-colindex="4" class="">Description</th>
                </tr>
              </thead>
              <tbody role="rowgroup">
                <tr role="row" data-pk="title" class="" id="__BVID__1349__row_title">
                  <td aria-colindex="1" role="cell" class=""><code data-v-866a22e8="" translate="translate"
                      class="text-nowrap notranslate">title</code></td>
                  <td aria-colindex="2" role="cell" class="">String</td>
                  <td aria-colindex="3" role="cell" class=""></td>
                  <td aria-colindex="4" role="cell" class="">Text content to place in the title</td>
                </tr>
                <tr role="row" data-pk="title-tag" class="" id="__BVID__1349__row_title-tag">
                  <td aria-colindex="1" role="cell" class=""><code data-v-866a22e8="" translate="translate"
                      class="text-nowrap notranslate">title-tag</code></td>
                  <td aria-colindex="2" role="cell" class="">String</td>
                  <td aria-colindex="3" role="cell" class=""><code data-v-866a22e8="" translate="translate"
                      class="word-wrap-normal notranslate">'h4'</code></td>
                  <td aria-colindex="4" role="cell" class="">Specify the HTML tag to render instead of the default tag
                    for the title</td>
                </tr>
              </tbody>
            </table>
          </div>
        </article>
        <header data-v-866a22e8="" class="row align-items-center">
          <div data-v-866a22e8="" class="col-sm-9">
            <h3 data-v-866a22e8="" id="comp-ref-b-card-sub-title" tabindex="-1" class="bv-no-focus-ring"><span
                data-v-866a22e8="" class="bd-content-title"><code data-v-866a22e8="" translate="translate"
                  class="notranslate bigger">&lt;b-card-sub-title&gt;</code><a data-v-866a22e8=""
                  href="../../../bootstrap-vue/docs/components/card#comp-ref-b-card-sub-title" class="anchorjs-link"
                  aria-labelledby="comp-ref-b-card-sub-title" target="_self"></a></span></h3>
            <a data-v-866a22e8="" rel="noopener" target="_blank"
              href="https://vuejs.org/v2/guide/render-function.html#Functional-Components"
              class="badge badge-secondary"> Functional Component </a>
          </div>
          <div data-v-866a22e8="" class="text-sm-right col-sm-3"><a data-v-866a22e8="" rel="noopener" target="_blank"
              href="https://github.com/bootstrap-vue/bootstrap-vue/tree/dev/src/components/card/card-sub-title.js"
              class="btn btn-outline-secondary btn-sm"> View source </a></div>
        </header>
        <ul data-v-866a22e8="" class="component-ref-mini-toc my-3">
          <li data-v-866a22e8=""><a data-v-866a22e8="" href="#comp-ref-b-card-sub-title-props"><code data-v-866a22e8=""
                translate="translate" class="notranslate">&lt;b-card-sub-title&gt;</code> Properties </a></li>
        </ul>
        <article data-v-866a22e8="" class="bd-content">
          <h4 data-v-866a22e8="" id="comp-ref-b-card-sub-title-props" tabindex="-1" class="bv-no-focus-ring mb-3"><span
              data-v-866a22e8="" class="bd-content-title"> Properties <a data-v-866a22e8=""
                href="../../../bootstrap-vue/docs/components/card#comp-ref-b-card-sub-title-props" class="anchorjs-link"
                aria-labelledby="comp-ref-b-card-sub-title-props" target="_self"></a></span></h4>
          <div data-v-866a22e8="" class="table-responsive-sm">
            <table role="table" aria-busy="false" aria-colcount="4" class="table b-table bv-docs-table table-striped"
              id="__BVID__1366">
              <thead role="rowgroup" class="">
                <tr role="row" class="">
                  <th role="columnheader" scope="col" aria-colindex="1" class="">Property</th>
                  <th role="columnheader" scope="col" aria-colindex="2" class="">Type</th>
                  <th role="columnheader" scope="col" aria-colindex="3" class="">Default</th>
                  <th role="columnheader" scope="col" aria-colindex="4" class="">Description</th>
                </tr>
              </thead>
              <tbody role="rowgroup">
                <tr role="row" data-pk="sub-title" class="" id="__BVID__1366__row_sub-title">
                  <td aria-colindex="1" role="cell" class=""><code data-v-866a22e8="" translate="translate"
                      class="text-nowrap notranslate">sub-title</code></td>
                  <td aria-colindex="2" role="cell" class="">String</td>
                  <td aria-colindex="3" role="cell" class=""></td>
                  <td aria-colindex="4" role="cell" class="">Text content to place in the sub title</td>
                </tr>
                <tr role="row" data-pk="sub-title-tag" class="" id="__BVID__1366__row_sub-title-tag">
                  <td aria-colindex="1" role="cell" class=""><code data-v-866a22e8="" translate="translate"
                      class="text-nowrap notranslate">sub-title-tag</code></td>
                  <td aria-colindex="2" role="cell" class="">String</td>
                  <td aria-colindex="3" role="cell" class=""><code data-v-866a22e8="" translate="translate"
                      class="word-wrap-normal notranslate">'h6'</code></td>
                  <td aria-colindex="4" role="cell" class="">Specify the HTML tag to render instead of the default tag
                    for the sub title</td>
                </tr>
                <tr role="row" data-pk="sub-title-text-variant" class="" id="__BVID__1366__row_sub-title-text-variant">
                  <td aria-colindex="1" role="cell" class=""><code data-v-866a22e8="" translate="translate"
                      class="text-nowrap notranslate">sub-title-text-variant</code></td>
                  <td aria-colindex="2" role="cell" class="">String</td>
                  <td aria-colindex="3" role="cell" class=""><code data-v-866a22e8="" translate="translate"
                      class="word-wrap-normal notranslate">'muted'</code></td>
                  <td aria-colindex="4" role="cell" class="">Applies one of the Bootstrap theme color variants to the
                    sub title text</td>
                </tr>
              </tbody>
            </table>
          </div>
        </article>
        <header data-v-866a22e8="" class="row align-items-center">
          <div data-v-866a22e8="" class="col-sm-9">
            <h3 data-v-866a22e8="" id="comp-ref-b-card-img" tabindex="-1" class="bv-no-focus-ring"><span
                data-v-866a22e8="" class="bd-content-title"><code data-v-866a22e8="" translate="translate"
                  class="notranslate bigger">&lt;b-card-img&gt;</code><a data-v-866a22e8=""
                  href="../../../bootstrap-vue/docs/components/card#comp-ref-b-card-img" class="anchorjs-link"
                  aria-labelledby="comp-ref-b-card-img" target="_self"></a></span></h3>
            <a data-v-866a22e8="" rel="noopener" target="_blank"
              href="https://vuejs.org/v2/guide/render-function.html#Functional-Components"
              class="badge badge-secondary"> Functional Component </a>
          </div>
          <div data-v-866a22e8="" class="text-sm-right col-sm-3"><a data-v-866a22e8="" rel="noopener" target="_blank"
              href="https://github.com/bootstrap-vue/bootstrap-vue/tree/dev/src/components/card/card-img.js"
              class="btn btn-outline-secondary btn-sm"> View source </a></div>
        </header>
        <ul data-v-866a22e8="" class="component-ref-mini-toc my-3">
          <li data-v-866a22e8=""><a data-v-866a22e8="" href="#comp-ref-b-card-img-props"><code data-v-866a22e8=""
                translate="translate" class="notranslate">&lt;b-card-img&gt;</code> Properties </a></li>
        </ul>
        <article data-v-866a22e8="" class="bd-content">
          <h4 data-v-866a22e8="" id="comp-ref-b-card-img-props" tabindex="-1" class="bv-no-focus-ring mb-3"><span
              data-v-866a22e8="" class="bd-content-title"> Properties <a data-v-866a22e8=""
                href="../../../bootstrap-vue/docs/components/card#comp-ref-b-card-img-props" class="anchorjs-link"
                aria-labelledby="comp-ref-b-card-img-props" target="_self"></a></span></h4>
          <div data-v-866a22e8="" class="table-responsive-sm">
            <table role="table" aria-busy="false" aria-colcount="4" class="table b-table bv-docs-table table-striped"
              id="__BVID__1384">
              <thead role="rowgroup" class="">
                <tr role="row" class="">
                  <th role="columnheader" scope="col" tabindex="0" aria-colindex="1" aria-sort="none"
                    class="b-table-sort-icon-left">Property<span class="sr-only"> (Click to sort Ascending)</span></th>
                  <th role="columnheader" scope="col" tabindex="0" aria-colindex="2" class="">Type</th>
                  <th role="columnheader" scope="col" tabindex="0" aria-colindex="3" class="">Default</th>
                  <th role="columnheader" scope="col" tabindex="0" aria-colindex="4" class="">Description</th>
                </tr>
              </thead>
              <tbody role="rowgroup">
                <tr role="row" data-pk="src" class="" id="__BVID__1384__row_src">
                  <td aria-colindex="1" role="cell" class=""><code data-v-866a22e8="" translate="translate"
                      class="text-nowrap notranslate">src</code> <span data-v-866a22e8=""
                      class="badge badge-info">Required</span></td>
                  <td aria-colindex="2" role="cell" class="">String</td>
                  <td aria-colindex="3" role="cell" class=""></td>
                  <td aria-colindex="4" role="cell" class="">URL to set for the 'src' attribute</td>
                </tr>
                <tr role="row" data-pk="alt" class="" id="__BVID__1384__row_alt">
                  <td aria-colindex="1" role="cell" class=""><code data-v-866a22e8="" translate="translate"
                      class="text-nowrap notranslate">alt</code></td>
                  <td aria-colindex="2" role="cell" class="">String</td>
                  <td aria-colindex="3" role="cell" class=""></td>
                  <td aria-colindex="4" role="cell" class="">Value to set for the 'alt' attribute</td>
                </tr>
                <tr role="row" data-pk="top" class="" id="__BVID__1384__row_top">
                  <td aria-colindex="1" role="cell" class=""><code data-v-866a22e8="" translate="translate"
                      class="text-nowrap notranslate">top</code></td>
                  <td aria-colindex="2" role="cell" class="">Boolean</td>
                  <td aria-colindex="3" role="cell" class=""><code data-v-866a22e8="" translate="translate"
                      class="word-wrap-normal notranslate">false</code></td>
                  <td aria-colindex="4" role="cell" class="">Set if the image will be placed at the top of the card</td>
                </tr>
                <tr role="row" data-pk="bottom" class="" id="__BVID__1384__row_bottom">
                  <td aria-colindex="1" role="cell" class=""><code data-v-866a22e8="" translate="translate"
                      class="text-nowrap notranslate">bottom</code></td>
                  <td aria-colindex="2" role="cell" class="">Boolean</td>
                  <td aria-colindex="3" role="cell" class=""><code data-v-866a22e8="" translate="translate"
                      class="word-wrap-normal notranslate">false</code></td>
                  <td aria-colindex="4" role="cell" class="">Set if the image will be placed at the bottom of the card
                  </td>
                </tr>
                <tr role="row" data-pk="start" class="" id="__BVID__1384__row_start">
                  <td aria-colindex="1" role="cell" class=""><code data-v-866a22e8="" translate="translate"
                      class="text-nowrap notranslate">start</code></td>
                  <td aria-colindex="2" role="cell" class="">Boolean</td>
                  <td aria-colindex="3" role="cell" class=""><code data-v-866a22e8="" translate="translate"
                      class="word-wrap-normal notranslate">false</code></td>
                  <td aria-colindex="4" role="cell" class="">Set if the image will be placed at the start (left) of the
                    card</td>
                </tr>
                <tr role="row" data-pk="left" class="" id="__BVID__1384__row_left">
                  <td aria-colindex="1" role="cell" class=""><code data-v-866a22e8="" translate="translate"
                      class="text-nowrap notranslate">left</code></td>
                  <td aria-colindex="2" role="cell" class="">Boolean</td>
                  <td aria-colindex="3" role="cell" class=""><code data-v-866a22e8="" translate="translate"
                      class="word-wrap-normal notranslate">false</code></td>
                  <td aria-colindex="4" role="cell" class="">Set if the image will be placed at the start (left) of the
                    card. Synonym for the 'left' prop</td>
                </tr>
                <tr role="row" data-pk="end" class="" id="__BVID__1384__row_end">
                  <td aria-colindex="1" role="cell" class=""><code data-v-866a22e8="" translate="translate"
                      class="text-nowrap notranslate">end</code></td>
                  <td aria-colindex="2" role="cell" class="">Boolean</td>
                  <td aria-colindex="3" role="cell" class=""><code data-v-866a22e8="" translate="translate"
                      class="word-wrap-normal notranslate">false</code></td>
                  <td aria-colindex="4" role="cell" class="">Set if the image will be placed at the end (right) of the
                    card</td>
                </tr>
                <tr role="row" data-pk="right" class="" id="__BVID__1384__row_right">
                  <td aria-colindex="1" role="cell" class=""><code data-v-866a22e8="" translate="translate"
                      class="text-nowrap notranslate">right</code></td>
                  <td aria-colindex="2" role="cell" class="">Boolean</td>
                  <td aria-colindex="3" role="cell" class=""><code data-v-866a22e8="" translate="translate"
                      class="word-wrap-normal notranslate">false</code></td>
                  <td aria-colindex="4" role="cell" class="">Set if the image will be placed at the end (right) of the
                    card. Synonym for the 'right' prop</td>
                </tr>
                <tr role="row" data-pk="height" class="" id="__BVID__1384__row_height">
                  <td aria-colindex="1" role="cell" class=""><code data-v-866a22e8="" translate="translate"
                      class="text-nowrap notranslate">height</code></td>
                  <td aria-colindex="2" role="cell" class="">Number or String</td>
                  <td aria-colindex="3" role="cell" class=""></td>
                  <td aria-colindex="4" role="cell" class="">The value to set on the image's 'height' attribute</td>
                </tr>
                <tr role="row" data-pk="width" class="" id="__BVID__1384__row_width">
                  <td aria-colindex="1" role="cell" class=""><code data-v-866a22e8="" translate="translate"
                      class="text-nowrap notranslate">width</code></td>
                  <td aria-colindex="2" role="cell" class="">Number or String</td>
                  <td aria-colindex="3" role="cell" class=""></td>
                  <td aria-colindex="4" role="cell" class="">The value to set on the image's 'width' attribute</td>
                </tr>
              </tbody>
            </table>
          </div>
        </article>
        <header data-v-866a22e8="" class="row align-items-center">
          <div data-v-866a22e8="" class="col-sm-9">
            <h3 data-v-866a22e8="" id="comp-ref-b-card-img-lazy" tabindex="-1" class="bv-no-focus-ring"><span
                data-v-866a22e8="" class="bd-content-title"><code data-v-866a22e8="" translate="translate"
                  class="notranslate bigger">&lt;b-card-img-lazy&gt;</code><a data-v-866a22e8=""
                  href="../../../bootstrap-vue/docs/components/card#comp-ref-b-card-img-lazy" class="anchorjs-link"
                  aria-labelledby="comp-ref-b-card-img-lazy" target="_self"></a></span></h3>
            <a data-v-866a22e8="" rel="noopener" target="_blank"
              href="https://vuejs.org/v2/guide/render-function.html#Functional-Components"
              class="badge badge-secondary"> Functional Component </a>
          </div>
          <div data-v-866a22e8="" class="text-sm-right col-sm-3"><a data-v-866a22e8="" rel="noopener" target="_blank"
              href="https://github.com/bootstrap-vue/bootstrap-vue/tree/dev/src/components/card/card-img-lazy.js"
              class="btn btn-outline-secondary btn-sm"> View source </a></div>
        </header>
        <ul data-v-866a22e8="" class="component-ref-mini-toc my-3">
          <li data-v-866a22e8=""><a data-v-866a22e8="" href="#comp-ref-b-card-img-lazy-props"><code data-v-866a22e8=""
                translate="translate" class="notranslate">&lt;b-card-img-lazy&gt;</code> Properties </a></li>
        </ul>
        <article data-v-866a22e8="" class="bd-content">
          <h4 data-v-866a22e8="" id="comp-ref-b-card-img-lazy-props" tabindex="-1" class="bv-no-focus-ring mb-3"><span
              data-v-866a22e8="" class="bd-content-title"> Properties <a data-v-866a22e8=""
                href="../../../bootstrap-vue/docs/components/card#comp-ref-b-card-img-lazy-props" class="anchorjs-link"
                aria-labelledby="comp-ref-b-card-img-lazy-props" target="_self"></a></span></h4>
          <div data-v-866a22e8="" class="table-responsive-sm">
            <table role="table" aria-busy="false" aria-colcount="4" class="table b-table bv-docs-table table-striped"
              id="__BVID__1409">
              <thead role="rowgroup" class="">
                <tr role="row" class="">
                  <th role="columnheader" scope="col" tabindex="0" aria-colindex="1" aria-sort="none"
                    class="b-table-sort-icon-left">Property<span class="sr-only"> (Click to sort Ascending)</span></th>
                  <th role="columnheader" scope="col" tabindex="0" aria-colindex="2" class="">Type</th>
                  <th role="columnheader" scope="col" tabindex="0" aria-colindex="3" class="">Default</th>
                  <th role="columnheader" scope="col" tabindex="0" aria-colindex="4" class="">Description</th>
                </tr>
              </thead>
              <tbody role="rowgroup">
                <tr role="row" data-pk="src" class="" id="__BVID__1409__row_src">
                  <td aria-colindex="1" role="cell" class=""><code data-v-866a22e8="" translate="translate"
                      class="text-nowrap notranslate">src</code> <span data-v-866a22e8=""
                      class="badge badge-info">Required</span></td>
                  <td aria-colindex="2" role="cell" class="">String</td>
                  <td aria-colindex="3" role="cell" class=""></td>
                  <td aria-colindex="4" role="cell" class="">URL to set for the 'src' attribute</td>
                </tr>
                <tr role="row" data-pk="srcset" class="" id="__BVID__1409__row_srcset">
                  <td aria-colindex="1" role="cell" class=""><code data-v-866a22e8="" translate="translate"
                      class="text-nowrap notranslate">srcset</code></td>
                  <td aria-colindex="2" role="cell" class="">String or Array</td>
                  <td aria-colindex="3" role="cell" class=""></td>
                  <td aria-colindex="4" role="cell" class=""></td>
                </tr>
                <tr role="row" data-pk="sizes" class="" id="__BVID__1409__row_sizes">
                  <td aria-colindex="1" role="cell" class=""><code data-v-866a22e8="" translate="translate"
                      class="text-nowrap notranslate">sizes</code></td>
                  <td aria-colindex="2" role="cell" class="">String or Array</td>
                  <td aria-colindex="3" role="cell" class=""></td>
                  <td aria-colindex="4" role="cell" class=""></td>
                </tr>
                <tr role="row" data-pk="alt" class="" id="__BVID__1409__row_alt">
                  <td aria-colindex="1" role="cell" class=""><code data-v-866a22e8="" translate="translate"
                      class="text-nowrap notranslate">alt</code></td>
                  <td aria-colindex="2" role="cell" class="">String</td>
                  <td aria-colindex="3" role="cell" class=""></td>
                  <td aria-colindex="4" role="cell" class="">Value to set for the 'alt' attribute</td>
                </tr>
                <tr role="row" data-pk="width" class="" id="__BVID__1409__row_width">
                  <td aria-colindex="1" role="cell" class=""><code data-v-866a22e8="" translate="translate"
                      class="text-nowrap notranslate">width</code></td>
                  <td aria-colindex="2" role="cell" class="">Number or String</td>
                  <td aria-colindex="3" role="cell" class=""></td>
                  <td aria-colindex="4" role="cell" class="">The value to set on the image's 'width' attribute</td>
                </tr>
                <tr role="row" data-pk="height" class="" id="__BVID__1409__row_height">
                  <td aria-colindex="1" role="cell" class=""><code data-v-866a22e8="" translate="translate"
                      class="text-nowrap notranslate">height</code></td>
                  <td aria-colindex="2" role="cell" class="">Number or String</td>
                  <td aria-colindex="3" role="cell" class=""></td>
                  <td aria-colindex="4" role="cell" class="">The value to set on the image's 'height' attribute</td>
                </tr>
                <tr role="row" data-pk="blank-src" class="" id="__BVID__1409__row_blank-src">
                  <td aria-colindex="1" role="cell" class=""><code data-v-866a22e8="" translate="translate"
                      class="text-nowrap notranslate">blank-src</code></td>
                  <td aria-colindex="2" role="cell" class="">String</td>
                  <td aria-colindex="3" role="cell" class=""></td>
                  <td aria-colindex="4" role="cell" class="">URL of placeholder image. If not set, an SVG placeholder
                    placeholder will be used</td>
                </tr>
                <tr role="row" data-pk="blank-color" class="" id="__BVID__1409__row_blank-color">
                  <td aria-colindex="1" role="cell" class=""><code data-v-866a22e8="" translate="translate"
                      class="text-nowrap notranslate">blank-color</code></td>
                  <td aria-colindex="2" role="cell" class="">String</td>
                  <td aria-colindex="3" role="cell" class=""><code data-v-866a22e8="" translate="translate"
                      class="word-wrap-normal notranslate">'transparent'</code></td>
                  <td aria-colindex="4" role="cell" class="">CSS color of the blank SVG placeholder image. Has no effect
                    if 'blank-src' is set</td>
                </tr>
                <tr role="row" data-pk="blank-width" class="" id="__BVID__1409__row_blank-width">
                  <td aria-colindex="1" role="cell" class=""><code data-v-866a22e8="" translate="translate"
                      class="text-nowrap notranslate">blank-width</code></td>
                  <td aria-colindex="2" role="cell" class="">Number or String</td>
                  <td aria-colindex="3" role="cell" class=""></td>
                  <td aria-colindex="4" role="cell" class="">Value of the 'width' attribute for the placeholder image
                  </td>
                </tr>
                <tr role="row" data-pk="blank-height" class="" id="__BVID__1409__row_blank-height">
                  <td aria-colindex="1" role="cell" class=""><code data-v-866a22e8="" translate="translate"
                      class="text-nowrap notranslate">blank-height</code></td>
                  <td aria-colindex="2" role="cell" class="">Number or String</td>
                  <td aria-colindex="3" role="cell" class=""></td>
                  <td aria-colindex="4" role="cell" class="">Value of the 'height' attribute for the placeholder image
                  </td>
                </tr>
                <tr role="row" data-pk="show" class="" id="__BVID__1409__row_show">
                  <td aria-colindex="1" role="cell" class=""><code data-v-866a22e8="" translate="translate"
                      class="text-nowrap notranslate">show</code></td>
                  <td aria-colindex="2" role="cell" class="">Boolean</td>
                  <td aria-colindex="3" role="cell" class=""><code data-v-866a22e8="" translate="translate"
                      class="word-wrap-normal notranslate">false</code></td>
                  <td aria-colindex="4" role="cell" class="">If set to true, will force show the image specified via the
                    'src' prop</td>
                </tr>
                <tr role="row" data-pk="offset" class="" id="__BVID__1409__row_offset">
                  <td aria-colindex="1" role="cell" class=""><code data-v-866a22e8="" translate="translate"
                      class="text-nowrap notranslate">offset</code></td>
                  <td aria-colindex="2" role="cell" class="">Number or String</td>
                  <td aria-colindex="3" role="cell" class=""><code data-v-866a22e8="" translate="translate"
                      class="word-wrap-normal notranslate">360</code></td>
                  <td aria-colindex="4" role="cell" class="">Number of pixels away from the viewport edge before the
                    lazy image is loaded</td>
                </tr>
                <tr role="row" data-pk="top" class="" id="__BVID__1409__row_top">
                  <td aria-colindex="1" role="cell" class=""><code data-v-866a22e8="" translate="translate"
                      class="text-nowrap notranslate">top</code></td>
                  <td aria-colindex="2" role="cell" class="">Boolean</td>
                  <td aria-colindex="3" role="cell" class=""><code data-v-866a22e8="" translate="translate"
                      class="word-wrap-normal notranslate">false</code></td>
                  <td aria-colindex="4" role="cell" class="">Set if the image will be placed at the top of the card</td>
                </tr>
                <tr role="row" data-pk="bottom" class="" id="__BVID__1409__row_bottom">
                  <td aria-colindex="1" role="cell" class=""><code data-v-866a22e8="" translate="translate"
                      class="text-nowrap notranslate">bottom</code></td>
                  <td aria-colindex="2" role="cell" class="">Boolean</td>
                  <td aria-colindex="3" role="cell" class=""><code data-v-866a22e8="" translate="translate"
                      class="word-wrap-normal notranslate">false</code></td>
                  <td aria-colindex="4" role="cell" class="">Set if the image will be placed at the bottom of the card
                  </td>
                </tr>
                <tr role="row" data-pk="start" class="" id="__BVID__1409__row_start">
                  <td aria-colindex="1" role="cell" class=""><code data-v-866a22e8="" translate="translate"
                      class="text-nowrap notranslate">start</code></td>
                  <td aria-colindex="2" role="cell" class="">Boolean</td>
                  <td aria-colindex="3" role="cell" class=""><code data-v-866a22e8="" translate="translate"
                      class="word-wrap-normal notranslate">false</code></td>
                  <td aria-colindex="4" role="cell" class="">Set if the image will be placed at the start (left) of the
                    card</td>
                </tr>
                <tr role="row" data-pk="left" class="" id="__BVID__1409__row_left">
                  <td aria-colindex="1" role="cell" class=""><code data-v-866a22e8="" translate="translate"
                      class="text-nowrap notranslate">left</code></td>
                  <td aria-colindex="2" role="cell" class="">Boolean</td>
                  <td aria-colindex="3" role="cell" class=""><code data-v-866a22e8="" translate="translate"
                      class="word-wrap-normal notranslate">false</code></td>
                  <td aria-colindex="4" role="cell" class="">Set if the image will be placed at the start (left) of the
                    card. Synonym for the 'left' prop</td>
                </tr>
                <tr role="row" data-pk="end" class="" id="__BVID__1409__row_end">
                  <td aria-colindex="1" role="cell" class=""><code data-v-866a22e8="" translate="translate"
                      class="text-nowrap notranslate">end</code></td>
                  <td aria-colindex="2" role="cell" class="">Boolean</td>
                  <td aria-colindex="3" role="cell" class=""><code data-v-866a22e8="" translate="translate"
                      class="word-wrap-normal notranslate">false</code></td>
                  <td aria-colindex="4" role="cell" class="">Set if the image will be placed at the end (right) of the
                    card</td>
                </tr>
                <tr role="row" data-pk="right" class="" id="__BVID__1409__row_right">
                  <td aria-colindex="1" role="cell" class=""><code data-v-866a22e8="" translate="translate"
                      class="text-nowrap notranslate">right</code></td>
                  <td aria-colindex="2" role="cell" class="">Boolean</td>
                  <td aria-colindex="3" role="cell" class=""><code data-v-866a22e8="" translate="translate"
                      class="word-wrap-normal notranslate">false</code></td>
                  <td aria-colindex="4" role="cell" class="">Set if the image will be placed at the end (right) of the
                    card. Synonym for the 'right' prop</td>
                </tr>
              </tbody>
            </table>
          </div>
        </article>
        <header data-v-866a22e8="" class="row align-items-center">
          <div data-v-866a22e8="" class="col-sm-9">
            <h3 data-v-866a22e8="" id="comp-ref-b-card-text" tabindex="-1" class="bv-no-focus-ring"><span
                data-v-866a22e8="" class="bd-content-title"><code data-v-866a22e8="" translate="translate"
                  class="notranslate bigger">&lt;b-card-text&gt;</code><a data-v-866a22e8=""
                  href="../../../bootstrap-vue/docs/components/card#comp-ref-b-card-text" class="anchorjs-link"
                  aria-labelledby="comp-ref-b-card-text" target="_self"></a></span></h3>
            <a data-v-866a22e8="" rel="noopener" target="_blank"
              href="https://vuejs.org/v2/guide/render-function.html#Functional-Components"
              class="badge badge-secondary"> Functional Component </a>
          </div>
          <div data-v-866a22e8="" class="text-sm-right col-sm-3"><a data-v-866a22e8="" rel="noopener" target="_blank"
              href="https://github.com/bootstrap-vue/bootstrap-vue/tree/dev/src/components/card/card-text.js"
              class="btn btn-outline-secondary btn-sm"> View source </a></div>
        </header>
        <ul data-v-866a22e8="" class="component-ref-mini-toc my-3">
          <li data-v-866a22e8=""><a data-v-866a22e8="" href="#comp-ref-b-card-text-props"><code data-v-866a22e8=""
                translate="translate" class="notranslate">&lt;b-card-text&gt;</code> Properties </a></li>
        </ul>
        <article data-v-866a22e8="" class="bd-content">
          <h4 data-v-866a22e8="" id="comp-ref-b-card-text-props" tabindex="-1" class="bv-no-focus-ring mb-3"><span
              data-v-866a22e8="" class="bd-content-title"> Properties <a data-v-866a22e8=""
                href="../../../bootstrap-vue/docs/components/card#comp-ref-b-card-text-props" class="anchorjs-link"
                aria-labelledby="comp-ref-b-card-text-props" target="_self"></a></span></h4>
          <div data-v-866a22e8="" class="table-responsive-sm">
            <table role="table" aria-busy="false" aria-colcount="4" class="table b-table bv-docs-table table-striped"
              id="__BVID__1442">
              <thead role="rowgroup" class="">
                <tr role="row" class="">
                  <th role="columnheader" scope="col" aria-colindex="1" class="">Property</th>
                  <th role="columnheader" scope="col" aria-colindex="2" class="">Type</th>
                  <th role="columnheader" scope="col" aria-colindex="3" class="">Default</th>
                  <th role="columnheader" scope="col" aria-colindex="4" class="">Description</th>
                </tr>
              </thead>
              <tbody role="rowgroup">
                <tr role="row" data-pk="text-tag" class="" id="__BVID__1442__row_text-tag">
                  <td aria-colindex="1" role="cell" class=""><code data-v-866a22e8="" translate="translate"
                      class="text-nowrap notranslate">text-tag</code></td>
                  <td aria-colindex="2" role="cell" class="">String</td>
                  <td aria-colindex="3" role="cell" class=""><code data-v-866a22e8="" translate="translate"
                      class="word-wrap-normal notranslate">'p'</code></td>
                  <td aria-colindex="4" role="cell" class="">Specify the HTML tag to render instead of the default tag
                    for the text content</td>
                </tr>
              </tbody>
            </table>
          </div>
        </article>
        <header data-v-866a22e8="" class="row align-items-center">
          <div data-v-866a22e8="" class="col-sm-9">
            <h3 data-v-866a22e8="" id="comp-ref-b-card-group" tabindex="-1" class="bv-no-focus-ring"><span
                data-v-866a22e8="" class="bd-content-title"><code data-v-866a22e8="" translate="translate"
                  class="notranslate bigger">&lt;b-card-group&gt;</code><a data-v-866a22e8=""
                  href="../../../bootstrap-vue/docs/components/card#comp-ref-b-card-group" class="anchorjs-link"
                  aria-labelledby="comp-ref-b-card-group" target="_self"></a></span></h3>
            <a data-v-866a22e8="" rel="noopener" target="_blank"
              href="https://vuejs.org/v2/guide/render-function.html#Functional-Components"
              class="badge badge-secondary"> Functional Component </a>
          </div>
          <div data-v-866a22e8="" class="text-sm-right col-sm-3"><a data-v-866a22e8="" rel="noopener" target="_blank"
              href="https://github.com/bootstrap-vue/bootstrap-vue/tree/dev/src/components/card/card-group.js"
              class="btn btn-outline-secondary btn-sm"> View source </a></div>
        </header>
        <ul data-v-866a22e8="" class="component-ref-mini-toc my-3">
          <li data-v-866a22e8=""><a data-v-866a22e8="" href="#comp-ref-b-card-group-props"><code data-v-866a22e8=""
                translate="translate" class="notranslate">&lt;b-card-group&gt;</code> Properties </a></li>
        </ul>
        <article data-v-866a22e8="" class="bd-content">
          <h4 data-v-866a22e8="" id="comp-ref-b-card-group-props" tabindex="-1" class="bv-no-focus-ring mb-3"><span
              data-v-866a22e8="" class="bd-content-title"> Properties <a data-v-866a22e8=""
                href="../../../bootstrap-vue/docs/components/card#comp-ref-b-card-group-props" class="anchorjs-link"
                aria-labelledby="comp-ref-b-card-group-props" target="_self"></a></span></h4>
          <div data-v-866a22e8="" class="table-responsive-sm">
            <table role="table" aria-busy="false" aria-colcount="4" class="table b-table bv-docs-table table-striped"
              id="__BVID__1458">
              <thead role="rowgroup" class="">
                <tr role="row" class="">
                  <th role="columnheader" scope="col" aria-colindex="1" class="">Property</th>
                  <th role="columnheader" scope="col" aria-colindex="2" class="">Type</th>
                  <th role="columnheader" scope="col" aria-colindex="3" class="">Default</th>
                  <th role="columnheader" scope="col" aria-colindex="4" class="">Description</th>
                </tr>
              </thead>
              <tbody role="rowgroup">
                <tr role="row" data-pk="tag" class="" id="__BVID__1458__row_tag">
                  <td aria-colindex="1" role="cell" class=""><code data-v-866a22e8="" translate="translate"
                      class="text-nowrap notranslate">tag</code></td>
                  <td aria-colindex="2" role="cell" class="">String</td>
                  <td aria-colindex="3" role="cell" class=""><code data-v-866a22e8="" translate="translate"
                      class="word-wrap-normal notranslate">'div'</code></td>
                  <td aria-colindex="4" role="cell" class="">Specify the HTML tag to render instead of the default tag
                  </td>
                </tr>
                <tr role="row" data-pk="deck" class="" id="__BVID__1458__row_deck">
                  <td aria-colindex="1" role="cell" class=""><code data-v-866a22e8="" translate="translate"
                      class="text-nowrap notranslate">deck</code></td>
                  <td aria-colindex="2" role="cell" class="">Boolean</td>
                  <td aria-colindex="3" role="cell" class=""><code data-v-866a22e8="" translate="translate"
                      class="word-wrap-normal notranslate">false</code></td>
                  <td aria-colindex="4" role="cell" class="">When set renders the card group with gutters between cards
                  </td>
                </tr>
                <tr role="row" data-pk="columns" class="" id="__BVID__1458__row_columns">
                  <td aria-colindex="1" role="cell" class=""><code data-v-866a22e8="" translate="translate"
                      class="text-nowrap notranslate">columns</code></td>
                  <td aria-colindex="2" role="cell" class="">Boolean</td>
                  <td aria-colindex="3" role="cell" class=""><code data-v-866a22e8="" translate="translate"
                      class="word-wrap-normal notranslate">false</code></td>
                  <td aria-colindex="4" role="cell" class="">When set, renders the card group in a masonry-like columnar
                    style</td>
                </tr>
              </tbody>
            </table>
          </div>
        </article>
        <article class="bd-content">
          <h3 id="importing-individual-components" tabindex="-1" class="bv-no-focus-ring"><span
              class="bd-content-title"> Importing individual components <a
                href="../../../bootstrap-vue/docs/components/card#importing-individual-components" class="anchorjs-link"
                aria-labelledby="importing-individual-components" target="_self"></a></span></h3>
          <p> You can import individual components into your project via the following named
            exports: </p>
          <div class="table-responsive-sm">
            <table role="table" aria-busy="false" aria-colcount="3" class="table b-table bv-docs-table table-striped"
              id="__BVID__1472">
              <thead role="rowgroup" class="thead-default">
                <tr role="row" class="">
                  <th role="columnheader" scope="col" aria-colindex="1" class="">Component</th>
                  <th role="columnheader" scope="col" aria-colindex="2" class="">Named Export</th>
                  <th role="columnheader" scope="col" aria-colindex="3" class="">Import Path</th>
                </tr>
              </thead>
              <tbody role="rowgroup">
                <tr role="row" class="">
                  <td aria-colindex="1" role="cell" class=""><code translate="translate"
                      class="text-nowrap notranslate">&lt;b-card&gt;</code></td>
                  <td aria-colindex="2" role="cell" class=""><code translate="translate"
                      class="text-nowrap notranslate">BCard</code></td>
                  <td aria-colindex="3" role="cell" class=""><code translate="translate"
                      class="text-nowrap notranslate">bootstrap-vue</code></td>
                </tr>
                <tr role="row" class="">
                  <td aria-colindex="1" role="cell" class=""><code translate="translate"
                      class="text-nowrap notranslate">&lt;b-card-header&gt;</code></td>
                  <td aria-colindex="2" role="cell" class=""><code translate="translate"
                      class="text-nowrap notranslate">BCardHeader</code></td>
                  <td aria-colindex="3" role="cell" class=""><code translate="translate"
                      class="text-nowrap notranslate">bootstrap-vue</code></td>
                </tr>
                <tr role="row" class="">
                  <td aria-colindex="1" role="cell" class=""><code translate="translate"
                      class="text-nowrap notranslate">&lt;b-card-footer&gt;</code></td>
                  <td aria-colindex="2" role="cell" class=""><code translate="translate"
                      class="text-nowrap notranslate">BCardFooter</code></td>
                  <td aria-colindex="3" role="cell" class=""><code translate="translate"
                      class="text-nowrap notranslate">bootstrap-vue</code></td>
                </tr>
                <tr role="row" class="">
                  <td aria-colindex="1" role="cell" class=""><code translate="translate"
                      class="text-nowrap notranslate">&lt;b-card-body&gt;</code></td>
                  <td aria-colindex="2" role="cell" class=""><code translate="translate"
                      class="text-nowrap notranslate">BCardBody</code></td>
                  <td aria-colindex="3" role="cell" class=""><code translate="translate"
                      class="text-nowrap notranslate">bootstrap-vue</code></td>
                </tr>
                <tr role="row" class="">
                  <td aria-colindex="1" role="cell" class=""><code translate="translate"
                      class="text-nowrap notranslate">&lt;b-card-title&gt;</code></td>
                  <td aria-colindex="2" role="cell" class=""><code translate="translate"
                      class="text-nowrap notranslate">BCardTitle</code></td>
                  <td aria-colindex="3" role="cell" class=""><code translate="translate"
                      class="text-nowrap notranslate">bootstrap-vue</code></td>
                </tr>
                <tr role="row" class="">
                  <td aria-colindex="1" role="cell" class=""><code translate="translate"
                      class="text-nowrap notranslate">&lt;b-card-sub-title&gt;</code></td>
                  <td aria-colindex="2" role="cell" class=""><code translate="translate"
                      class="text-nowrap notranslate">BCardSubTitle</code></td>
                  <td aria-colindex="3" role="cell" class=""><code translate="translate"
                      class="text-nowrap notranslate">bootstrap-vue</code></td>
                </tr>
                <tr role="row" class="">
                  <td aria-colindex="1" role="cell" class=""><code translate="translate"
                      class="text-nowrap notranslate">&lt;b-card-img&gt;</code></td>
                  <td aria-colindex="2" role="cell" class=""><code translate="translate"
                      class="text-nowrap notranslate">BCardImg</code></td>
                  <td aria-colindex="3" role="cell" class=""><code translate="translate"
                      class="text-nowrap notranslate">bootstrap-vue</code></td>
                </tr>
                <tr role="row" class="">
                  <td aria-colindex="1" role="cell" class=""><code translate="translate"
                      class="text-nowrap notranslate">&lt;b-card-img-lazy&gt;</code></td>
                  <td aria-colindex="2" role="cell" class=""><code translate="translate"
                      class="text-nowrap notranslate">BCardImgLazy</code></td>
                  <td aria-colindex="3" role="cell" class=""><code translate="translate"
                      class="text-nowrap notranslate">bootstrap-vue</code></td>
                </tr>
                <tr role="row" class="">
                  <td aria-colindex="1" role="cell" class=""><code translate="translate"
                      class="text-nowrap notranslate">&lt;b-card-text&gt;</code></td>
                  <td aria-colindex="2" role="cell" class=""><code translate="translate"
                      class="text-nowrap notranslate">BCardText</code></td>
                  <td aria-colindex="3" role="cell" class=""><code translate="translate"
                      class="text-nowrap notranslate">bootstrap-vue</code></td>
                </tr>
                <tr role="row" class="">
                  <td aria-colindex="1" role="cell" class=""><code translate="translate"
                      class="text-nowrap notranslate">&lt;b-card-group&gt;</code></td>
                  <td aria-colindex="2" role="cell" class=""><code translate="translate"
                      class="text-nowrap notranslate">BCardGroup</code></td>
                  <td aria-colindex="3" role="cell" class=""><code translate="translate"
                      class="text-nowrap notranslate">bootstrap-vue</code></td>
                </tr>
              </tbody>
            </table>
          </div>
          <p><strong>Example:</strong></p>
          <figure class="highlight">
          <pre translate="translate" class="hljs language-js text-monospace p-2 notranslate javascript"><span class="hljs-keyword">import</span> { BCard } <span class="hljs-keyword">from</span> <span class="hljs-string">'bootstrap-vue'</span>
Vue.component(<span class="hljs-string">'b-card'</span>, BCard)</pre></figure>
        </article>
        <article class="bd-content">
          <h3 id="importing-as-a-plugin" tabindex="-1" class="bv-no-focus-ring"><span class="bd-content-title">
              Importing as a Vue.js plugin <a href="../../../bootstrap-vue/docs/components/card#importing-as-a-plugin"
                class="anchorjs-link" aria-labelledby="importing-as-a-plugin" target="_self"></a></span></h3>
          <p> This plugin includes all of the above listed individual
            components.
            Plugins also include any component aliases. </p>
          <div class="table-responsive-sm">
            <table fileds="namedExport,importPath" role="table" aria-busy="false" aria-colcount="2"
              class="table b-table bv-docs-table table-striped b-table-caption-top" id="__BVID__1491">
              <thead role="rowgroup" class="thead-default">
                <tr role="row" class="">
                  <th role="columnheader" scope="col" aria-colindex="1" class="">Named Export</th>
                  <th role="columnheader" scope="col" aria-colindex="2" class="">Import Path</th>
                </tr>
              </thead>
              <tbody role="rowgroup">
                <tr role="row" class="">
                  <td aria-colindex="1" role="cell" class=""><code translate="translate"
                      class="text-nowrap notranslate">CardPlugin</code></td>
                  <td aria-colindex="2" role="cell" class=""><code translate="translate"
                      class="text-nowrap notranslate">bootstrap-vue</code></td>
                </tr>
              </tbody>
            </table>
          </div>
          <p><strong>Example:</strong></p>
          <figure class="highlight">
          <pre translate="translate" class="hljs language-js text-monospace p-2 notranslate javascript"><span class="hljs-keyword">import</span> { CardPlugin } <span class="hljs-keyword">from</span> <span class="hljs-string">'bootstrap-vue'</span>
Vue.use(CardPlugin)</pre></figure>
        </article>
























      </main>
    </div>
  </div>


<script src="../../../v4/assets/js/vendor/jquery-slim.min.js"></script>
  <script src="../../../v4/dist/js/popper.min.js"></script>
  <script src="../../../v4/dist/js/bootstrap.min.js"></script>
  <script src="../../../v4/assets/js/docs.min.js"></script>
  <script src="../../../v4/assets/js/ie-emulation-modes-warning.js"></script>
  <script src="../../../v4/assets/js/docsearch.min.js"></script>
  <script>
    docsearch({
      appId: 'PRR89ISST8',
      apiKey: '95044d57d4d7bb744f322d1f18ed607f',
      indexName: 'z01-bootstrapV4',
      inputSelector: '#search-input',
      handleSelected: function (input, event, suggestion) {
        var url = suggestion.url;
        url = suggestion.isLvl1 ? url.split('#')[0] : url;
        // If it's a title we remove the anchor so it does not jump.
        window.location.href = url;
      },
      transformData: function (hits) {
        return hits.map(function (hit) {
          hit.url = hit.url.replace('https://v4-alpha.getbootstrap.com', '/docs/4.0');
          return hit;
        });
      },
      debug: false // Set debug to true if you want to inspect the dropdown
    });
  </script>
  <script>
    Holder.addTheme('gray', {
      bg: '#777',
      fg: 'rgba(255,255,255,.75)',
      font: 'Helvetica',
      fontweight: 'normal'
    });
  </script>
</body>

</html>